SELFHTML: JavaScript / Anwendungsbeispiele / Monatskalender
Author: Redaktion SELFHTML, selfhtml81@selfhtml.org
Description: Wie Sie mit Hilfe von JavaScript einen Monatskalender simulieren können, bei dem das aktuelle Tagesdatum hervorgehoben ist.
Keywords: SELFHTML, JavaScript, Monatskalender, Kalender, Date-Objekt
Date: 2005-08-22T21:21:39+02:00

| # Monatskalender
| Hinweise zu diesem Beispiel Quelltext mit Erläuterungen Anzeigebeispiel: So sieht's aus

## Hinweise zu diesem Beispiel

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 den praktischen Umgang mit dem Date-Objekt von JavaScript studieren, aber ebenso, wie sich durch kontrollierte document.write-Ausgaben komplexer HTML-Code erzeugen lässt.

## Quelltext mit Erläuterungen

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

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html>
    <head>
    <title>Monatskalender</title>
    </head>
    <body>

    <h1 style="font-family:Verdana,Arial; font-weight:normal">Monatskalender</h1>

    <script type="text/javascript">
    var d = new Date();
    var dm = d.getMonth() + 1;
    var dj = d.getYear();
    if (dj < 999)
      dj += 1900;
    Kalender(dm, dj);

    function Kalender (Monat, Jahr) {
      Monatsname = new Array("Januar", "Februar", "M&auml;rz", "April", "Mai", "Juni", "Juli",
                              "August", "September", "Oktober", "November", "Dezember");
      Tag = new Array("Mo", "Di", "Mi", "Do", "Fr", "Sa", "So");

      var KSchrArt = "Verdana,Arial"; /* Schriftart Kalenderkopf */
      var KSchrGroesse = 3;           /* Schriftgroesse 1-7 Kalenderkopf */
      var KSchrFarbe = "#FFFF00";     /* Schriftfarbe Kalenderkopf */
      var Khgrund = "#000066";        /* Hintergrundfarbe Kalenderkopf */
      var TSchrArt = "Verdana,Arial"; /* Schriftart Tagesanzeige */
      var TSchrGroesse = 3;           /* Schriftgroesse 1-7 Tagesanzeige */
      var TSchrFarbe = "#000000";     /* Schriftfarbe Tagesanzeige */
      var Thgrund = "#D0F0F0";        /* Hintergrundfarbe Tagesanzeige */
      var SoFarbe = "#E00000";        /* Schriftfarbe f. Sonntage */
      var Ahgrund = "#FFFF00";        /* Hintergrundfarbe f. heutigen Tag */

      var jetzt = new Date();
      var DieserMonat = jetzt.getMonth() + 1;
      var DiesesJahr = jetzt.getYear();
      if (DiesesJahr < 999)
        DiesesJahr += 1900;
      var DieserTag = jetzt.getDate();
      var Zeit = new Date(Jahr, Monat - 1, 1);
      var Start = Zeit.getDay();
      if (Start > 0) {
        Start--;
      } else {
        Start = 6;
      }
      var Stop = 31;
      if (Monat == 4 || Monat == 6 || Monat == 9 || Monat == 11)
        --Stop;
      if (Monat == 2) {
        Stop = Stop - 3;
        if (Jahr % 4 == 0)
          Stop++;
        if (Jahr % 100 == 0)
          Stop--;
        if (Jahr % 400 == 0)
          Stop++;
      }
      document.write('<table border="3" cellpadding="1" cellspacing="1">');
      var Monatskopf = Monatsname[Monat - 1] + " " + Jahr;
      SchreibeKopf(Monatskopf, Khgrund, KSchrFarbe, KSchrGroesse, KSchrArt);
      var Tageszahl = 1;
      for (var i = 0; i <= 5; i++) {
        document.write("<tr>");
        for (var j = 0; j <= 5; j++) {
          if ((i == 0) && (j < Start)) {
            SchreibeZelle("&#160;", Thgrund, TSchrFarbe, TSchrGroesse, TSchrArt);
          } else {
            if (Tageszahl > Stop) {
              SchreibeZelle("&#160;", Thgrund, TSchrFarbe, TSchrGroesse, TSchrArt);
            } else {
              if ((Jahr == DiesesJahr) && (Monat == DieserMonat) && (Tageszahl == DieserTag)) {
                SchreibeZelle(Tageszahl, Ahgrund, TSchrFarbe, TSchrGroesse, TSchrArt);
              } else {
                SchreibeZelle(Tageszahl, Thgrund, TSchrFarbe, TSchrGroesse, TSchrArt);
              }
              Tageszahl++;
            }
          }
        }
        if (Tageszahl > Stop) {
          SchreibeZelle("&#160;", Thgrund, SoFarbe, TSchrGroesse, TSchrArt);
        } else {
          if ((Jahr == DiesesJahr) && (Monat == DieserMonat) && (Tageszahl == DieserTag)) {
            SchreibeZelle(Tageszahl, Ahgrund, SoFarbe, TSchrGroesse, TSchrArt);
          } else {
            SchreibeZelle(Tageszahl, Thgrund, SoFarbe, TSchrGroesse, TSchrArt);
          }
          Tageszahl++;
        }
        document.write("<\/tr>");
      }
      document.write("<\/table>");
    }

    function SchreibeKopf (Monatstitel, HgFarbe, SchrFarbe, SchrGroesse, SchrArt) {
      document.write("<tr>");
      document.write('<td align="center" colspan="7" valign="middle" bgcolor="' + HgFarbe + '">');
      document.write('<font size="' + SchrGroesse + '" color="' + SchrFarbe + '" face="' + SchrArt + '"><b>');
      document.write(Monatstitel);
      document.write("<\/b><\/font><\/td><\/tr>");
      document.write("<tr>");
      for (var i = 0; i <= 6; i++)
        SchreibeZelle(Tag[i], HgFarbe, SchrFarbe, SchrGroesse, SchrArt);
      document.write("<\/tr>");
    }

    function SchreibeZelle (Inhalt, HgFarbe, SchrFarbe, SchrGroesse, SchrArt) {
      document.write('<td align="center" valign="middle" bgcolor="' + HgFarbe + '">');
      document.write('<font size="' + SchrGroesse + '" color="' + SchrFarbe + '" face="' + SchrArt + '"><b>');
      document.write(Inhalt);
      document.write("<\/b><\/font><\/td>");
    }
    </script>

    </body>
    </html>

### Erläuterung:

#### 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.
Die Anweisung `if(dj < 999) dj+=1900;` ist dabei nötig, um einigen älteren Browsern, die bei dem Aufruf der `getYear`-Methode nicht Jahr-2000-kompatibel reagieren, zum Ermitteln des gewünschten Jahres zu verhelfen.

#### 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 nutzen als zur einmaligen Ausgabe des aktuellen Kalendermonats.

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.
Zu den Variablen, die am Beginn von `Kalender()` definiert werden, gehören auch die Angaben zu Farben, Schriftarten und Schriftgrößen für Kalenderhintergrund und Anzeige der Tage. Die Variablendefinitionen sind im Beispiel zum besseren Verständnis auskommentiert. Ändern Sie diese Werte, wenn Sie den Kalender verwenden möchten, nach Ihren Wünschen.

#### 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. Auch dabei wird wieder die Anpassung für das Jahr 2000 durchgeführt.

#### Anzeige in Tabelle vorbereiten:

Der Monatskalender soll mit Hilfe von `document.write()`-Anweisungen 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 von `document.write()`-Befehlen, die dynamisch die entsprechenden HTML-Konstrukte in die Datei schreiben. Die Funktion `Kalender()` selbst schreibt jedoch nur den Anfang und das Ende der Tabelle. Ansonsten übernimmt sie nur die Kontrolle, was genau in welcher Reihenfolge geschrieben werden soll. Um den Tabellenkopf mit Monats- und Jahresangabe sowie den Wochentagnamen zu schreiben, ruft sie die Unterfunktion `SchreibeKopf()` auf. Um die einzelnen Datenzellen zu schreiben, wird jeweils die Unterfunktion `SchreibeZelle()` aufgerufen. Um letztere 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 das erzwungene Leerzeichen `&#160;` übergeben, denn nur so wird die Tabellenzelle nachher sichtbar dargestellt, auch wenn sie keinen Inhalt hat. Wenn die Zelle eine Tageszahl anzeigen soll, wird eine entsprechende Variable übergeben.
Die Funktionen `SchreibeKopf()` und `SchreibeZelle()` schreiben die einzelnen Datenzellen und setzen dabei die Variablen zur Gestaltung des Kalenders ein.

| Persönliche Seitenbesuche zählen mit Cookies
| Taschenrechner

© 2007 Impressum