JavaScript/Anwendung und Praxis/Monatskalender

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Das Beispiel schreibt in eine HTML-Datei an einer gewünschten Stelle einen frei formatierbaren Kalender des aktuellen Monats.

Der aktuelle Tag wird darin hervorgehoben dargestellt. Ein kleines Schmuckstück für Web-Seiten. Anhand des Beispiels können Sie lernen, wie man dynamisch Tabellen erzeugen kann, aber ebenso den praktischen Umgang mit dem Date-Objekt von JavaScript.

Tabellen dynamisch erzeugen[Bearbeiten]

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

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel 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 zweite 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. [2] An diese werden in einer Zählschleife 7 Tabellenzellen dynamisch eingefügt. Sie erhalten mit innerHTML einen Text als Inhalt.

Der Kalender[Bearbeiten]

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

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
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.

Quellen[Bearbeiten]

  1. MSDN: Table Object
  2. https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/insertRow