Kalender mit Uhrzeit und Feiertagen

So funktioniert das Script

Das Script besteht aus vier Teilen: Es liest das heutige Datum aus, baut daraus die Kalendertabelle zusammen, sucht in einer Liste nach der passenden Tagesinfo und lässt zum Schluss das Anzeigefeld zwischen Uhrzeit, Monatsname und Info wechseln. Alles steckt in einer sofort ausgeführten Funktion, damit die vielen Variablennamen nicht mit anderen Scripts auf der Seite kollidieren.

const heute = new Date();
const tag = heute.getDate();
const monat = heute.getMonth();       // 0 = Januar … 11 = Dezember
const jahr = heute.getFullYear();

const AT = tag + "." + (monat + 1);
const AD = AT + "." + jahr;

new Date() liefert das aktuelle Datum samt Uhrzeit. Wichtig zu wissen: getMonth() zählt die Monate ab null, der Januar ist also die 0 und der Dezember die 11 — deshalb steht beim Zusammenbauen von AT ein monat + 1. AT ist danach ein Text wie "24.12" und AD das volle Datum wie "24.12.2026"; beide braucht später die Feiertagsliste. Das alte Script benutzte hier noch das veraltete getYear() mit einer 1900er-Korrektur — getFullYear() liefert die vierstellige Jahreszahl direkt.

const datum = new Date(jahr, monat, 1);
let a = datum.getDay();               // Wochentag des Monatsersten (0 = So)
if (a === 0) a = 7;                   // die Woche soll mit Montag beginnen

Für die Tabelle muss das Script wissen, an welchem Wochentag der Monat beginnt. new Date(jahr, monat, 1) erzeugt den Monatsersten, getDay() nennt dessen Wochentag — allerdings amerikanisch gezählt mit Sonntag als 0. Weil unser Kalender montags beginnt, wird aus der 0 eine 7: So steht der Sonntag in der letzten Spalte.

for (let b = 1; b < a; b++) {         // Leerzellen vor dem 1. des Monats
  html += "<td style='" + zelle + "'></td>";
}
for (let b = 1; b <= 31; b++) {
  datum.setDate(b);
  if (datum.getMonth() !== monat) break;   // Monatsende erreicht
  …
}

Die erste Schleife füllt die Zellen vor dem Monatsersten mit Leerzellen auf — beginnt der Monat etwa an einem Mittwoch, bleiben Montag und Dienstag leer. Die zweite Schleife läuft stur von 1 bis 31 und benutzt einen hübschen Trick, um das Monatsende zu finden: setDate(31) in einem 30-Tage-Monat springt automatisch in den Folgemonat. Sobald getMonth() also nicht mehr zum aktuellen Monat passt, bricht break die Schleife ab — so muss niemand wissen, ob der Monat 28, 29, 30 oder 31 Tage hat. Innerhalb der Schleife bekommt der heutige Tag eine gelbe Hintergrundfarbe, und nach jeder siebten Zelle beginnt mit </tr><tr> eine neue Tabellenzeile. Das alte Script schrieb die Tabelle mit document.write() direkt ins Dokument; die moderne Fassung sammelt das HTML in der Variablen html und setzt es per innerHTML in einen Container — das funktioniert auch, wenn die Seite längst fertig geladen ist.

if (AT === "1.1") info = "Neujahr";
else if (AT === "6.1") info = "Heilige Drei Könige";
…
else info = "Leider ist für heute nichts eingetragen";

if (AD === "15.8.2009") info = "Mariä Himmelfahrt";

Das ist die Feiertagsliste — und die dürft ihr nach Herzenslust erweitern. Jede Zeile vergleicht AT mit einem festen Termin im Format "Tag.Monat" (ohne führende Nullen). Ein eigener Eintrag ist eine Zeile nach dem Muster else if (AT === "5.6") info = "Omas Geburtstag";, eingefügt irgendwo vor dem abschließenden else. Danach folgt noch die Liste der einmaligen Ereignisse mit Jahreszahl: Sie steht bewusst nach der ersten Liste und überschreibt deren Ergebnis — ein Eintrag für "24.12.2026" würde also genau in diesem einen Jahr den normalen Heiligabend-Text ersetzen. Das Original verglich hier übrigens mit Zahlen statt Textketten, wodurch sich im Oktober Einträge in die Quere kommen konnten (die Zahl 1.10 ist dasselbe wie 1.1) — der Vergleich mit === und Anführungszeichen behebt das.

const spr = [kopf, info];

function rede() {
  const num = Math.floor(2 * Math.random());
  anzeige.value = spr[num];
  setTimeout(rede, 3000);
}

Für das Anzeigefeld liegen zwei Texte im Array spr bereit: der Monatskopf (z. B. „Dezember 2026") und die Tagesinfo. Math.random() liefert eine Zufallszahl zwischen 0 und 1; mal 2 genommen und mit Math.floor() abgerundet ergibt das zufällig 0 oder 1 — also einen der beiden Texte. setTimeout(rede, 3000) ruft die Funktion nach 3000 Millisekunden erneut auf, sodass das Feld alle drei Sekunden neu würfelt.

function uhrFeld() {
  anzeige.value = uhrzeit();
  setTimeout(uhrFeld, 9001);
}

Parallel dazu schreibt uhrFeld() etwa alle neun Sekunden die aktuelle Uhrzeit ins selbe Feld — so mischt sich die Uhr regelmäßig unter die beiden anderen Anzeigen, genau wie im Original. Die Hilfsfunktion uhrzeit() formatiert Stunden, Minuten und Sekunden mit padStart(2, "0"), das einstelligen Werten eine führende Null verpasst: aus 9:5:3 wird 09:05:03 Uhr. Das Original erledigte das umständlicher über ein verstecktes Formularfeld und Bedingungsoperatoren — das Ergebnis ist dasselbe.

Zum Anpassen: Die Wechseltempi stellt ihr über die beiden Zahlen in setTimeout(rede, 3000) und setTimeout(uhrFeld, 9001) ein (Millisekunden). Die Farben des Kalenders stecken gesammelt im Tabellenaufbau — #003399 ist das Blau der Kopfzeile, #ffff66 das Gelb der Wochentage und des heutigen Tages, #ff6666 das Rot des Sonntags. Und die Feiertagsliste wartet, wie gesagt, auf eure eigenen Einträge.