Kalender

So funktioniert das Script

Das Script besteht aus einem Farb- und Namens-Vorrat am Anfang, einer kleinen Hilfsfunktion zelle() für einzelne Tabellenzellen und der Hauptfunktion zeichneKalender(monat, jahr), die das komplette Kalenderblatt als HTML-Text zusammenbaut und in die Seite einsetzt. Ganz unten wird sie einmal mit dem aktuellen Monat und Jahr aufgerufen.

let start = new Date(jahr, monat - 1, 1).getDay();
start = start > 0 ? start - 1 : 6;

Zuerst muss das Script wissen, an welchem Wochentag der Monat beginnt. new Date(jahr, monat - 1, 1) erzeugt ein Datum für den Monatsersten — das - 1 ist nötig, weil JavaScript die Monate intern von 0 (Januar) bis 11 (Dezember) zählt. getDay() liefert den Wochentag, allerdings amerikanisch gezählt: 0 ist der Sonntag. Die zweite Zeile rechnet das in unsere Zählung um, bei der die Woche mit Montag (0) beginnt und der Sonntag die 6 bekommt.

let stop = 31;
if (monat === 4 || monat === 6 || monat === 9 || monat === 11) stop--;
if (monat === 2) {
  stop = 28;
  if (jahr % 4 === 0) stop++;
  if (jahr % 100 === 0) stop--;
  if (jahr % 400 === 0) stop++;
}

Dann die Monatslänge: Standard sind 31 Tage, April, Juni, September und November bekommen einen abgezogen. Der Februar ist der Sonderfall — hier steckt die komplette Schaltjahr-Regel drin. Der Prozent-Operator % liefert den Rest einer Division; jahr % 4 === 0 bedeutet also „durch 4 teilbar“. Die drei if-Zeilen setzen genau die Regel „durch 4: ja, durch 100: doch nicht, durch 400: doch“ um. Probiert es im Kopf mit 2024 (29 Tage), 1900 (28) und 2000 (29) durch.

function zelle(inhalt, grund, schrift) {
  return '<td style="background:' + grund + ';color:' + schrift +
    ';border:1px solid #999;padding:3px 7px;text-align:center;' +
    'font-weight:bold;">' + inhalt + "</td>";
}

Die Hilfsfunktion baut den HTML-Text für eine einzelne Tabellenzelle zusammen: Inhalt, Hintergrundfarbe und Schriftfarbe kommen als Parameter herein, heraus kommt ein fertiges <td>-Element mit den Farben als Inline-Stil. Weil Kopfzeile, normale Tage, Sonntage und der heutige Tag alle nur andere Farbkombinationen derselben Zelle sind, spart diese Funktion eine Menge doppelten Code.

for (let woche = 0; woche < 6; woche++) {
  html += "<tr>";
  for (let spalte = 0; spalte < 7; spalte++) {
    const schrift = spalte === 6 ? sonntagSchrift : tagSchrift;
    if ((woche === 0 && spalte < start) || tageszahl > stop) {
      html += zelle("&nbsp;", tagGrund, schrift);
    } else { …

Das Herzstück sind zwei ineinander verschachtelte Schleifen: Die äußere läuft über bis zu sechs Wochenzeilen (so viele kann ein Monat maximal anreißen), die innere über die sieben Spalten Montag bis Sonntag. Die Spalte 6 ist immer der Sonntag und bekommt die rote Schriftfarbe. Zwei Fälle ergeben eine Leerzelle: In der ersten Woche alle Spalten vor dem Starttag des Monats, und am Ende alles, was über die Monatslänge stop hinausgeht. In allen anderen Zellen landet die laufende tageszahl, die danach um eins erhöht wird.

const grund = istDieserMonat && tageszahl === heute.getDate()
  ? heuteGrund : tagGrund;

Hier passiert die Markierung des heutigen Tags: Stimmen dargestellter Monat und die laufende Tageszahl mit dem echten Datum überein, bekommt die Zelle den gelben Hintergrund heuteGrund statt des normalen Blautons. Die Prüfung istDieserMonat sorgt dafür, dass die Markierung nur im tatsächlich aktuellen Monat auftaucht — wichtig, falls ihr die Funktion für andere Monate benutzt.

document.getElementById("kal-ausgabe").innerHTML = html;

Zum Schluss wird der komplette zusammengesetzte HTML-Text auf einen Schlag in den Container kal-ausgabe geschrieben. Das ersetzt das veraltete document.write() des Original-Scripts: Statt beim Laden mitten in die Seite zu schreiben, füllt das Script gezielt ein vorbereitetes Element — das funktioniert auch, wenn die Seite längst fertig geladen ist.

Zum Anpassen: Die sechs Farb-Konstanten am Scriptanfang sind eure Spielwiese — tragt dort einfach eigene Farbwerte ein, jede Zeile ist kommentiert. Und wer statt des aktuellen Monats einen bestimmten zeigen will, ruft unten z. B. zeichneKalender(12, 2026) für den Dezember 2026 auf.