SELFHTML/Quickbar  JavaScript  Anwendungsbeispiele

Monatskalender
Diese Seite ist ein Dokument mit Informationstext

 Monatskalender - das Beispiel

 

Netscape2.0MS IE 3.0 Monatskalender

Beispiel 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

1