Kalender nur mit Farben, responsive, Drei-Monats-Übersicht

[thymian]

Hallo zusammen, für ein Projekt war ein Kalender nur mit Farbführung und Legende gewünscht, nicht mit den Events in den Tabellenzellen. Diese Lösung eignet sich für wiederkehrende Events derselben Bezeichnung. Viele tolle Beiträge hier im Forum haben mir dabei geholfen, deshalb will ich sie hier kurz auflisten und ein Beispiel verlinken.

Responsiver Kalender
Pergamon Interactive hat netterweise das Template cal_default.html5 in eine Liste übertragen und ein CSS dazu bereitgestellt. Super, denn so bricht die Kalender-Tabelle nicht um. Wer trotzdem das Tabellen-Template von Contao benutzen möchte, kann diesen Tip von planepix befolgen.

Durchblättern ohne Reload der Seite
Wer nicht möchte, dass die Seite ständig neu lädt, wenn man im Kalender blättert, kann dieses Snippet von mandrael in die mod_calendar.html5 einbauen.

Jahresübersicht oder mehrere Monate
Hier haben die Fragen von Webstylerin und der Code von Spooky super geholfen: Mehrere Monate darstellen.. Via "$i" im Code trägt man die gewünschten Monate ein. Die Datei wird als z. B. file_calendar.php erstellt, auf den Server in /templates geladen, mit {{file::file_calendar.php}} in ein HTML-Inhaltselement gepackt und direkt auf der Kalender-Seite eingebunden.

In diesem Beitrag verrät Nicole, wie sie damit einen Buchungskalender mit Extra-Navigation erstellt hat. Auch einen Link zur fertigen Seite stellt sie zur Verfügung (danke!).

Farbführung und mehrere Kategorien
Wenn mehrere Kategorien im Kalender auch farblich hervorgehoben werden sollen, kann man das mit mehreren 'Kalendern' realisieren (leider dieselbe Bezeichnung, in dem Fall im Backend unter Inhalte > Events > Neuer Kalender). Im CSS tauchen dann z. B. cal_1 und cal_2 auf (allerdings nicht im Minikalender), die mit background-color belegt werden können. Vergesst nicht, die Kalender in der Eventliste und dem Eventleser zu aktivieren, falls Ihr diese Module nutzt.

Auch ein Kalender ohne Inhalt, nur mit Farben, ist so möglich, die Farben teilen sich dann quasi das li (= die Kalenderzelle). Dafür habe ich an der Stelle, wo im Template das "a" erzeugt wird (= die Eventbezeichnung), ein " " eingetragen. Eine Löschung von "a" lässt ansonsten auch den Hintergrund verschwinden:

<div class="event cal_<?php echo $event['parent']; ?><?php echo $event['class']; ?>">
              <a href="<?php echo $event['href']; ?>" title="<?php echo $event['title']; ?> (<?php if ($event['day']): echo $event['day']; ?>, <?php endif; echo $event['date']; if ($event['time']): ?>, <?php echo $event['time']; endif; ?>)"<?php echo $event['target']; ?>>&nbsp;</a>
               </div>

Die Zahlen für die einzelnen Tage (".header") bekommt Ihr über absolute Positionierung und z-index mittig über den background von ".event .cal_1" und/oder ".cal_2". Das li.days.active muss dafür position:relative haben.

Die Beispiele findet Ihr hier: Farbkalender. Weiter unten außerdem Möglichkeiten für eine Legende und eine normale Eventliste.