SELFHTML/Quickbar JavaScript Anwendungsbeispiele

| ## Monatskalender
| Monatskalender - das Beispiel

## Monatskalender

Anzeigebeispiel: So sieht's aus

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.

Hinweis: Zur besseren Orientierung enthält das Beispiel Verweise zu den entsprechenden Erläuterungen, z.B. 1*. Diese Verweise gehören nicht zum Quellcode. Falls Sie das Beispiel in einen Editor kopieren, müssen Sie diese Verweise löschen. Andernfalls erhalten Sie JavaScript-Fehlermeldungen.

### Beispiel:

    <html>
    <head>
    <title>Seitentitel</title>
    </head>
    <body>
    <script language="JavaScript">
    <!--
    1* var d = new Date();
    var dm = d.getMonth() + 1;
    var dj = d.getYear();
    if(dj < 100) dj+=1900;
    Kalender(dm,dj);

    2* 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 = "#FFFFFF";        /* Hintergrundfarbe f. heutigen Tag */

    3* var jetzt = new Date();
    var DieserMonat = jetzt.getMonth() + 1;
    var DiesesJahr = jetzt.getYear();
    if(DiesesJahr < 100) DiesesJahr+=1900;
    var DieserTag = jetzt.getDate();
    4* 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)
    {
     AnzTage=-3;
     if(Jahr%4==0) Stop++;
     if(Jahr%100==0) Stop--;
     if(Jahr%400==0) Stop++;
    }
    5* 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(i=0;i<=5;i++)
     {
      document.write("<tr>");
      for(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(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 Scriptbereich 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 einfach nur einen Monat und ein Jahr erwartet, das als Monatskalender angezeigt werden soll. Auf diese Weise läßt 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.

Anzeige in Tabelle vorbereiten
Der Monatskalender soll mit Hilfe von `document.write()`-Anweisungen in eine HTML-Tabelle geschrieben werden. Zunächst muß 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 Monatag 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-Befehle 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, muß 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.

weiter: | Persönliche Seitenbesuche zählen mit Cookies
zurück: | Taschenrechner

SELFHTML/Quickbar JavaScript Anwendungsbeispiele

© 1998 Stefan Münz, muenz@csi.com