Feuerwehr Adventskalender

Ein einfacher Adventskalender für die Webseite der speziell für die Verwendung im CMS des LFV-Website-Kits 2.0 entwickelt wurde, das auf Django CMS basiert. Er nutzt Bootstrap 4.6.0, entsprechend der Version, die im LFV-Website-Kit verwendet wird. Die Anzeige ist voll responsiv, d.h. vor allem auch für kleinere Endgeäte optimiert.

• Türchen lassen sich beliebig anordnen (einfach "umkopieren")
• Bilder lassen sich in modalem Popup in Originalgröße öffnen
• Zoom Effekt der Türchen beim darüberfahren mit der Maus
• Klickt man auf eine Tür, die noch nicht geöffnet werden kann, erscheint ein entsprechender Hinweis
• Die Tür des aktuellen Tages muss angeklickt werden, damit sich geöffnet wird

Verwendung im LFV-Website-Kit

Eine detaillierte Anleitung, wie ihr den Kalender beziehungsweise die einzelnen Skripte in eure Webseite integrieren könnt, die auf dem LFV-Website-Kit basiert, findet ihr hier: https://www.feuerwehr-gruenwald.de/adventskalender/. Dort sind die Code-Snippets auch schon entsprechend vorbereitet.

Verwendung als WordPress Plugin

Den Kalender als WordPress-Plugin findet ihr in diesem Github-Projekt: ffg_adventskalender_wordpress

Verwendung Standalone

Einfacher geht's Standalone: Checkt das Projekt aus und öffnet anschließend die adventskalender.html. Die adventskalender_konfigurator.html enthält einige zusätzliche JavaScript Methoden und eine UI, mit der sich verschiedene Einstellungen des Kalenders testen lassen. So kann der aktuelle Monat per Checkbox auf Dezember geändert werden, damit sich die Änderungen bzw. Anpassungsmöglichkeiten testen lassen.

Kalender anpassen

Die Hauptarbeit steckt in der adventskalenderdaten.js. Diese enthält zu jedem Tag im Adventskalender die ensprechenden Angaben zum Bild:

Aufbau Array

    "1": { 
        "image": "/bilder/bild_tuer_1.jpg", 
        "text": "Bildbeschreibung <strong>kann HTML enthalten</strong>", 
        "link": "https://github.com" 
    }

Schlüssel	Beschreibung
1 .. 24	Leitet das Array für jeden einzelnen Tag des Kalenders ein.
image	Enhält die Angabe des Bildes, welches hinter der Tür angezeigt werden soll. Entweder als relative oder absolute Pfadangabe. Bei absoluter Pfadangabe kann zur Erleichterung auch noch der Parameter basePath genutzt werden um nicht 24 Mal die gleichen Pfade einzugeben.
text	Die Beschreibung, die im Popup unter dem Bild angezeigt werden soll. Kann HTML-Tags enthalten.
link	Eine URL zu weiteren Informationen. Ist ein link angegeben, wird automatisch ein Button unter dem text angezeigt, der die URL in einem neuen Fenster öffnet. Die Angabe des Button-Labels erfolgt in der adventskalender.js.

Weitere Anpassungsmöglichkeiten

In der Datei adventskalender.js gibt es noch die folgenden Anpassungsmöglichkeiten, um das Aussehen des Kalenders zu steuern:

Schlüssel	Wert	Beschreibung
showModalForPastDoors	true oder false	Steuert, ob das Popup für vergangene Türchen angezeigt werden soll. Wenn der Wert auf false steht, passiert bei einem Klick auf das Türchen nichts.
showImagesForPastDoors	true oder false	Steuert, ob Bilder für vergangene Türchen mit 40% Deckkraft hinter den Türchen sichtbar sind.
backgroundImageUrlLarge	URL	URL des Hintergrundbilds für große Bildschirme.
backgroundImageUrlSmall	URL	URL des Hintergrundbilds für kleine Bildschirme (mobile Endgeräte).
labelPopupModelLink	Text	Label für den Button im Popup.
headerPopupNotTime	Text	Text in Überschrift im Popup wenn Tür noch nicht geöffnet werden kann.

Usability

Anzeige des Kalenders mit Defaulteinstellungen auf Desktopbildschirmen:

Anzeige des Kalenders mit Defaulteinstellungen auf mobilen Endgeräten: