JavaScript/Tutorials/Monatskalender

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

In diesem Tutorial lernst du, wie du einen (oder mehrere) Monatskalender erzeugst. Ein Script ermittelt das aktuelle Datum und den Wochentag oder reagiert auf eine Nutzereingabe. Anhand des Beispiels kannst du lernen, wie man dynamisch Tabellen erzeugt, aber ebenso den praktischen Umgang mit dem Date-Objekt von JavaScript.

Dieses Tutorial ist die umfassende Neubearbeitung eines Anwendungsbeispiels von Stefan Münz aus dem Jahre 2001.[1] 2015 wurde das Beispiel aktualisiert, indem die Tabelle mit JavaScript im DOM erzeugt und die Formatierung durch CSS festgelegt wird. 2024 wurde das Tutorial erneut aktualisiert und zusätzlich eine Variante im Grid Layout integriert.

Vorüberlegungen

Mit input type="date" gibt es bereits eine Möglichkeit einzelne Daten einzugeben. Häufig möchte man dem Nutzer jedoch eine Monatsansicht bieten, in der er einen oder mehrere Tage auswählen kann. Dabei soll flexibel zwischen aktuellem und den jeweiligen vorherigen und folgenden Monaten gewechselt werden.

ToDo (weitere ToDos)

Unser Projekt im April 2024:
Baustellen im Wiki - helfende Hände gesucht

Dieser Artikel muss völllig neu überarbeitet werden!

--Matthias Scharwies (Diskussion) 06:49, 28. Mär. 2024 (CET)

Kalender mit Tabelle

Tabellen dynamisch erzeugen

Auch wenn es üblicher ist Elemente mit der createElement()-Methode zu erzeugen, können Sie bei Tabellen die Eigenschaften und Methoden des tableObject nutzen.[2]


Tabellenüberschrift dynamisch einfügen ansehen …
  function ueberschriftEinfuegen () {
      var tabelle = document.getElementById('tabelle');
	  // schreibe Tabellenüberschrift
	  var caption = tabelle.createCaption();
	  caption.innerHTML = 'Überschrift';
  }
  
  function zeileEinfuegen () {
      var tabelle = document.getElementById('tabelle');	  
      // schreibe Tabellenzeile
	   var Reihe = tabelle.insertRow(0);
       for (var i = 0; i <= 6; i++) {
		    var Inhalt = 'Zelle ' + (i+1);
            var Zelle = Reihe.insertCell();
            Zelle.innerHTML = Inhalt;	
	   }
  }

In diesem Beispiel erhält die schon vorhandene, aber leere Tabelle bei Klick auf den ersten Button durch createCaption eine Überschrift.

An den zweiten Button wird mit addEventListener eine Funktion zeileEinfuegen() angehängt, die bei einem Click-Event die Tabelle mit document.getElementById aufruft und mit insertRow() eine neue Zeile einfügt. [3] An diese werden in einer Zählschleife 7 Tabellenzellen dynamisch eingefügt. Sie erhalten mit innerHTML einen Text als Inhalt.

Das Kalenderscript

Das Beispiel zeigt eine vollständige HTML-Datei, in der das JavaScript für den Monatskalender eingebunden ist.

Beispiel ansehen …
	// dm und dj sind Monat und Jahr, die im Kalender dargestellt werden
	// insbesondere könnte auch ein Monat gewählt werden, in dem das aktuelle Datum nicht vorkommt
    var d = new Date();
    var dm = d.getMonth() + 1;
    var dj = d.getYear() + 1900;

    Kalender(dm, dj);

    function Kalender (Monat, Jahr) {

      Monatsname = new Array("Januar", "Februar", "März", "April", "Mai", "Juni",
                             "Juli", "August", "September", "Oktober", "November", "Dezember");
      Tag = new Array("Mo", "Di", "Mi", "Do", "Fr", "Sa", "So");

	  // aktuelles Datum für die spätere Hervorhebung ermitteln
      var jetzt = new Date();
      var DieserMonat = jetzt.getMonth() + 1;
      var DiesesJahr = jetzt.getYear() + 1900;
      var DieserTag = jetzt.getDate();
	  
	  // ermittle Wochentag des ersten Tags im Monat halte diese Information in Start fest
      var Zeit = new Date(Jahr, Monat - 1, 1);
      var Start = Zeit.getDay();

      if (Start > 0) {
       Start--;
      } else {
        Start = 6;
      }

	  // die meisten Monate haben 31 Tage...
      var Stop = 31;

	  // ...April (4), Juni (6), September (9) und November (11) haben nur 30 Tage...
      if (Monat == 4 || Monat == 6 || Monat == 9 || Monat == 11) --Stop;

	  // ...und der Februar nur 28 Tage...
      if (Monat == 2) {
                      Stop = Stop-3;
		// ...außer in Schaltjahren
        if (Jahr %   4 == 0) Stop++;
        if (Jahr % 100 == 0) Stop--;
        if (Jahr % 400 == 0) Stop++;
      }

      var tabelle = document.getElementById('kalender');
	  // schreibe Tabellenüberschrift
      var Monatskopf = Monatsname[Monat - 1] + " " + Jahr;
	  var caption = tabelle.createCaption();
	  caption.innerHTML = Monatskopf;

      // schreibe Tabellenkopf
	   var row = tabelle.insertRow(0);
       for (var i = 0; i <= 6; i++) {
			var cell = row.insertCell(i);
            cell.innerHTML = Tag[i];
	   }

      // ermittle Tag und schreibe Zeile
      var Tageszahl = 1;
 
      for (var i = 0; i <= 4; i++) {
        var row = tabelle.insertRow(1 +i);
	  
        for (var j = 0; j <= 6; j++) {
		  
		  // Zellen vor dem Start-Tag in der ersten Zeile und Zeilen nach dem Stop-Tag werden leer aufgefüllt
          if ( ((i == 0) && (j <= 5) && (j < Start)) || (Tageszahl > Stop) ) {
			var cell = row.insertCell(j);
            cell.innerHTML = ' ';
          } else {
		    // normale Zellen werden mit der Tageszahl befüllt und mit der Klasse Kalendertag markiert
			var cell = row.insertCell(j);
            cell.innerHTML = Tageszahl;
			cell.className = 'kalendertag'
			  
			// und der aktuelle Tag (heute) wird noch einmal speziell mit der Klasse "heute" markiert
            if ((Jahr == DiesesJahr) && (Monat == DieserMonat) && (Tageszahl == DieserTag)) {
              cell.className = cell.className+' heute';  
            }
              
			Tageszahl++;	
          }
        }
      }
    }

Aktuelles Datum ermitteln:

Im Script-Bereich wird zunächst mit d = new Date() ein neues Datumsobjekt mit dem aktuellen Zeitpunkt erzeugt. In den Variablen dm und dj werden anschließend aus dem neuen Datumsobjekt d der Monat und das Jahr ermittelt. Mit diesen beiden Variablen wird die Funktion Kalender() aufgerufen.


Funktion "Kalender()":

Die Funktion Kalender() ist als in sich abgeschlossenes Unterprogramm realisiert, das einen Monat und ein Jahr als Parameter erwartet, das als Monatskalender angezeigt werden soll. Auf diese Weise lässt sich die Funktion auch noch anderweitig als zur einmaligen Ausgabe des aktuellen Kalendermonats nutzen.

Zu Beginn der Funktion Kalender() werden erst einmal verschiedene Variablen definiert. Dazu gehören die gewünschten Monatsnamen und die Wochentage, die jeweils als Array-Objekte angelegt werden. Wenn Sie andere, zum Beispiel landesspezifische Namen wie "Jänner" wünschen, ändern Sie den entsprechenden Namen einfach.


Ermitteln, ob aktiver Tag im anzuzeigenden Monat liegt:

Da die Funktion Kalender() ja als Parameter übergeben bekommt, welchen Monat in welchem Jahr sie ausgeben soll, kann es sich durchaus um einen anderen als den aktuellen Monat handeln (nur im obigen Beispiel wird die Funktion mit dem aktuellen Monat/Jahr aufgerufen). Die Funktion ermittelt deshalb noch einmal separat die Daten des aktuellen Tages (DieserTag), des aktuellen Monats (DieserMonat) und des aktuellen Jahres (DiesesJahr). Die entsprechenden Daten werden später benötigt, um den aktuellen Tag farblich hervorzuheben, sofern er in dem auszugebenden Monat vorkommt.


Anzeige in Tabelle vorbereiten:

Der Monatskalender soll mit Hilfe der oben besprochenen Methoden in eine HTML-Tabelle geschrieben werden. Zunächst muss jedoch ermittelt werden, wie viele Tage der auszugebende Monat hat, und an welchem Wochentag er beginnt. Davon hängt ab, wie die Tage in die Tabelle geschrieben werden. In der Variablen Start wird der Wochentag gespeichert, auf den der erste Tag des auszugebenden Monats fällt. Dazu wird in einer Variablen Zeit ein Datumsobjekt erzeugt, das sich mit Date(Jahr,Monat-1,1) auf den ersten Tag des auszugebenden Monats bezieht. Mit Zeit.getDay() wird der Wochentag dieses Tages ermittelt (0 für Montag bis 6 für Sonntag).

In der Variablen Stop wird die Anzahl der Tage ermittelt, die der Monat hat. Wenn es einer der Monate 4, 6, 9 oder 11 ist, hat der Monat 30 Tage. Wenn es der Monat 2 ist, ist etwas Kalenderakrobatik erforderlich. Denn dieser Monat kann 28 oder 29 Tage haben, abhängig einmal davon, ob es ein Schaltjahr ist (durch 4 teilbar), ob es trotzdem kein Schaltjahr ist (durch 100 teilbar), oder ob es doch wieder ein Schaltjahr ist (durch 400 teilbar).


Tabelle erzeugen:

Nachdem alle Vorbereitungen getroffen sind, kann die Tabelle mit dem Kalendermonat geschrieben werden. Dies geschieht mit Hilfe der insertRow()- und insertCell()-Methoden, die dynamisch die entsprechenden HTML-Konstrukte in die Datei schreiben. Um den Tabellenkopf mit Monats- und Jahresangabe zu schreiben, erzeugt sie mit createCaption() eine caption. Um die einzelnen Datenzellen mit den richtigen Daten zu versorgen, muss die Kalender()-Funktion die zuvor ermittelten Angaben zum Wochentag des ersten Tages im Monat sowie das aktuelle Tagesdatum berücksichtigen und die entsprechenden Parameter korrekt übergeben. Falls eine Zelle leer bleiben soll, wird ein Leerzeichen ' ' übergeben. Wenn die Zelle eine Tageszahl anzeigen soll, wird eine entsprechende Variable übergeben.

HTML und Script verbinden

  • Create a table with 7 columns, create table headings ‘Sunday’ to ‘Saturday’.
  • Create ‘previous’ and ‘next’ buttons to nagivate months.
  • Create dropdowns to jump directly to any month or year.


Zuordnung Datum und Wochentag

Kalender im Grid Layout

Eigentlich scheint es logisch zu sein, dass der Kalender aus einer HTML-Tabelle besteht. Andererseits ist es - wie eben gezeigt - ohne JavaScript nicht möglich eine beliebige Tabellenzelle mit dem Wochentag im Tabellenkopf oben zu verknüpfen.

ToDo (weitere ToDos)

Unser Projekt im April 2024:
Baustellen im Wiki - helfende Hände gesucht


--Matthias Scharwies (Diskussion) 06:49, 28. Mär. 2024 (CET)

Siehe auch

  • Einführung in Zeit & Datum
    Date-Icon.svg
     
  • Timer und Countdown

    Zeit hoch und runter zählen
    Ausführungszeiten messen

     
  • input type="date" und mehr
    HTML5 bietet eine Vielzahl von neuen Eingabe-Typen für Datums- und Zeitangaben.
     

Weblinks

  1. ↑ Monatskalender - Anwendungsbeispiel aus dem Jahre 2001 (SELFHTML-Doku auf web.archive.org)
  2. ↑ MSDN: Table Object
  3. ↑ MDN: insertRow
Abgerufen von „http://wiki.selfhtml.org/index.php?title=JavaScript/Tutorials/Monatskalender&oldid=97900“