Terminkalender für die Schul-Website

Termine hier eintragen, Code kopieren, in WordPress einfügen. Der fertige Kalender braucht kein JavaScript – das Umblättern der Monate funktioniert mit reinem HTML und CSS.

1Aussehen und Zeitraum

Bestehendes Design der Schulseite behalten Erzeugt genau den Aufbau, den die Seite jetzt schon hat. Die vorhandene Gestaltung greift weiter. Immer zwei Monate.

Eigenes Design mitliefern Bringt die Gestaltung selbst mit, beliebig viele Monate, Ferien als Zeitraum eingefärbt. Funktioniert nur, wenn WordPress den Style-Teil nicht herausfiltert.

Eigenes Design, CSS zentral gespeichert Wie „Eigenes Design“, aber die Gestaltung kommt einmalig in das zentrale CSS der Website. Auf die Seite kommt nur noch der Kalender. Für den Fall, dass WordPress den Style-Teil herausfiltert.

Schuljahr

Beim Aufruf sichtbar

Farbe

Erklärung unter dem Kalender

Variante, Farbe, Erklärung und alle Termine merkt sich der Browser automatisch. Damit sie auch sicher in der Datei selbst stehen – unabhängig vom Browser und für andere Geräte – hier eine neue Datei speichern und die alte damit ersetzen:

2Termine

„bis“ nur bei Zeiträumen ausfüllen, z. B. Ferien. Ein Link ist freiwillig – jeder Termin wird im Kalender markiert, mit Link wird der Tag zusätzlich anklickbar.

Die Termine lassen sich als eigene Textdatei sichern und später wieder laden – zum Aufbewahren, als Sicherheitskopie oder zum Weitergeben. Die Datei kann man auch mit einem einfachen Texteditor lesen und ändern. Beim Laden werden die Termine automatisch nach Datum sortiert.

3Vorschau

4Code für WordPress

So kommt der Code auf die Seite

Seite in WordPress bearbeiten.
Klassischer Editor: oben rechts auf den Reiter Text wechseln (nicht „Visuell“). Block-Editor: den Block „Individuelles HTML“ anklicken.
Den alten Kalender komplett markieren und löschen – vom Kommentar KALENDER-DATEN bzw. <div id="calendar-container"> bis zum letzten schließenden </div>.
Neuen Code einfügen, speichern, Seite ansehen.

Beim eigenen Design gilt dasselbe: Der Code besteht aus drei Teilen – dem Kommentar KALENDER-DATEN, dem Teil <style> … </style> und dem Kalender <div class="kkgkal"> … </div>. Alle drei gehören zusammen an genau die Stelle, an der bisher der alte Kalender stand. Nichts davon muss woanders hin.

Bei „CSS zentral gespeichert“: Einmalig das CSS aus dem zweiten Feld an die zentrale Stelle kopieren – meist unter Design → Customizer → Zusätzliches CSS – und veröffentlichen. Falls dort schon ein älterer Block „Terminkalender (kkgkal)“ steht, diesen ersetzen. Auf die Kalenderseite kommt dann nur der Code aus dem ersten Feld, genau wie oben beschrieben.

Test nach dem Speichern: Erscheint der Kalender als farbiges Raster mit ‹ ›, hat alles geklappt. Stehen dort nur untereinander Zahlen, hat WordPress den Style-Teil herausgefiltert – dann die Variante „Bestehendes Design“ nehmen.

Wichtig: Nach dem Einfügen nicht in den Reiter „Visuell“ wechseln – der visuelle Editor kann leere Kalenderzellen und Markierungen ohne Link entfernen. Direkt im Reiter „Text“ speichern.

Vorhandenen Kalender weiterbearbeiten

Den Kalender-Code von der Website hier einfügen – die Termine werden ausgelesen und ersetzen die Liste oben. Klappt mit Code aus diesem Werkzeug und auch mit dem bisherigen, von Hand gebauten Kalender.