SELFHTML: JavaScript / Anwendungsbeispiele / Monatskalender

SELFHTML/Navigationshilfen

JavaScript/DOM

Anwendungsbeispiele

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 Webseiten.

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 bgcolor="#FFFFFF" text="#000000">

<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 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.
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   ü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

SELFHTML/Navigationshilfen

JavaScript/DOM

Anwendungsbeispiele