Events mit Contao verwalten
Neben der Konfiguration der für die Termin-Verwaltung in Contao benötigten Module, zeigen wir wie das Tabellen-Template des Kalenders modifiziert werden kann - um es auch für responsive Websites nutzen zu können.
Schritt 1: Seiten und Kalender anlegen
Um die Event-Verwaltung zu nutzen und unsere Module richtig anpassen zu können, sollten wir jedoch zuerst mind. zwei Seiten in der Seitenstruktur anlegen. Eine Seite auf der wir die Eventliste bzw. den Kalender anzeigen wollen und eine, die uns dann das entsprechende Event in der Einzeldarstellung anzeigt (Eventleser-Seite).
Zusätzlich müssen wir unter Backend-Module und "Events" noch einen "Neuen Kalender" anlegen und dort dann die eben angelegte Eventleser-Seite auswählen. Der Kalender bietet uns auch noch die Möglichkeit diesen auf eine bestimmte Benutzergruppe einzuschränken. Und Achtung, diese Option funktioniert tatsächlich nur hier! Zwar ist im Modul "Eventliste" diese Option auch angegeben, bleibt dort aber wirkungslos.
Contao ist ab Werk mit einer Event-Verwaltung ausgestattet, die es uns relativ einfach macht Veranstaltungen oder sonstige Termine zu verwalten. Dabei ist die Event-Verwaltung in Contao nach dem gleichen Prinzip aufgebaut wie die Nachrichten-Verwaltung.
Allerdings gibt es auch einige Unterschiede zwischen beiden Bereichen - sowie ein paar Unzulänglichkeiten, die Beachtung verlangen und die Nutzung der Module etwas unübersichtlich gestalten.
Wie auch die Nachrichten-Verwaltung besteht die Event-Verwaltung aus mehreren Modulen, die wir in der Modulverwaltung anlegen müssen.
Schritt 2: Das Modul "Eventliste"
Nun können wir unter Themes und "Module" die nötigen Event-Module anlegen.
Die Eventliste gibt alle Veranstaltungen in einer mehr oder weniger übersichtlichen Aufzählung aus. Dabei gruppiert die Liste je nach Einstellung die einzelnen Veranstaltungen nach Tag/Monat/Jahr/Zukünftigen/Vergangenen oder auch allen Events.
Diese Gruppierung wählen wir im Modul unter "Anzeigeformat" aus. Wichtig ist auch die Sortierreihenfolge: Je nachdem stehen neue Events unten oder oben in der Liste. Üblichweise werden wir eine aufsteigende Sortierung wählen, damit das nächst anstehende Event immer oben in der Liste steht.
Wichtig ist weiterhin auch noch die Auswahl des entsprechenden Templates. Für die Event-Liste ist das Template event-list oder event-upcomming geeignet. Die beiden anderen Templates, die zur Auswahl stehen, beinhalten keinen Link auf den Eventleser und werden somit in den meisten Fällen wenig sinnvoll sein.
Das Feld Eventleser sollte uns zwar die Möglichkeit geben auf einen bestimmten Eventleser zu verweisen, bleibt aber leider wirkungslos.
Schritt 3: Das Modul "Kalender"
Contao gibt uns hier die Möglichkeit unsere Veranstaltungen in Form eines Kalenders darzustellen. Wichtig ist hier, dass die Weiterleitungsseite eingestellt wird. Die Einstellung aus der Eventverwaltung wird an dieser Stelle ignoriert.
Des Weiteren ignoriert der Kalender, wie auch die Nachrichtenliste, die Einstellung des Zugriffsschutzes. Dieser kann nur über die Eventverwaltung eingestellt werden.
Für den Kalender wird nur ein Template zur Verfügung gestellt: Leider wird dieses immer noch in einer Tabellenform ausgeliefert und ist somit für Designs im Responsive Webdesign nicht geeignet.
Tabellen sind überdies nicht mehr zeitgemäß und nicht barrierefrei. Deshalb haben wir das Template ein wenig modifiziert und auf Listenbasis umgesetzt: Den fertigen HTML-Code gibts etwas weiter unten im Text.
Schritt 4: Das Modul "Eventleser"
Ähnlich wie bei der Nachrichtenverwaltung gibt es auch hier ein "Leser"-Modul. Das Modul wird entsprechend in den Artikel einer Seite eingebunden und kann dann von der Eventliste her aufgerufen werden. Im Wesentlichen wird hier nur der Kalender ausgewählt, aus welchem der Eventleser seine Daten holt. Allerdings ist es eigentlich nicht sonderlich sinnvoll mehr als ein Eventlesermodul anzulegen, da die Einschränkung bereits in der Eventliste getroffen wird.
Das richtige Template zur Ausgabe des Events ist hier "event_full".
Hinweise & Bugs
Häufige Fehler-Quelle:
Wenn keine Events in der Vergangenheit liegen, bzw. angelegt sind, gibts es auch keinen Zurückblättern-Button im Kalender (Ausgabe bleibt leer)!
Weitere Fehler:
Fehler im Kalender: Weiterleitungsseite im Kalendermodul ohne Wirkung.
Nachrichtenliste: Zugriffsschutz in Eventliste ohne Wirkung & Einstellung Eventleser bleibt wirkungslos
Tabellenloses Kalender-Template für Contao
Da das Kalender-Template von Contao ab Werk bis jetzt nur mit Tabellen ausgeliefert wird und wir die diversen Nachteile von Tabellen ja bereist mehrfach erläuterten, haben wir ein tabellenloses Event-Template angehängt.
Der folgende HTML-Code basiert auf dem Contao Original-Template (cal_default.html5), in welchem wir die Tabelle gegen die Listendarstellung ausgetauscht haben. Mit der Listendarstellung und dem beigefügten CSS ließe sich zum Beispiel die untere Darstellung erreichen...
<div class="cal_calendar">
<div class="cal_head">
<ul class="cal_navigation">
<li class="head previous"><?php if ($this->prevHref): ?><a href="<?php echo $this->prevHref; ?>" title="<?php echo $this->prevTitle; ?>"><?php echo $this->prevLink; ?></a><?php else: ?>[nbsp]<?php endif; ?></li>
<li class="head current"><?php echo $this->current; ?></li>
<li class="head next"><?php if ($this->nextHref): ?><a href="<?php echo $this->nextHref; ?>" title="<?php echo $this->nextTitle; ?>"><?php echo $this->nextLink; ?></a><?php else: ?>[nbsp]<?php endif; ?></li>
</ul>
<ul class="cal_thead">
<?php foreach ($this->days as $i=>$day): ?>
<li class="label<?php echo $day['class']; ?>"><?php echo utf8_substr($day['name'], 0, $this->substr); ?><span class="invisible"><?php echo utf8_substr($day['name'], $this->substr); ?></span></li>
<?php endforeach; ?>
</ul>
</div>
<div class="cal_body">
<?php foreach ($this->weeks as $class=>$week): ?>
<ul class="<?php echo $class; ?>">
<?php foreach ($week as $day): ?>
<li class="<?php echo $day['class']; ?>">
<div class="header"><?php echo $day['label']; ?></div>
<?php foreach ($day['events'] as $event): ?>
<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']; ?>><?php echo $event['link']; ?></a>
</div>
<?php endforeach; ?>
</li>
<?php endforeach; ?>
</ul>
<?php endforeach; ?>
</div>
</div>CSS
/**ALLGEMEIN**/
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
color: #616161;
}
ul {
margin: 0;
padding: 0
}
li {
list-style-type: none
}
.invisible {
display: none
}
/**KALENDER STYLE***/
.cal_calendar
{
max-width: 700px;
width: 100%;
overflow: hidden;
}
.cal_navigation, .cal_head
{
height: 40px;
margin: 0;
padding: 0;
}
.cal_navigation li
{
float: left;
height: 30px;
padding-top: 6px;
text-align: center;
width: 33%;
}
.head.current
{
font-size: 25px;
padding-top: 0;
}
/***WOCHENTAGE***/
.cal_thead li
{
width: 14.285%;
height: 30px;
border: 2px solid #fff;
text-transform: uppercase;
text-align: center;
background-color: #616161;
float: left;
color: #fff;
display: table;
padding-top: 3px;
}
/***KALENDER***/
.cal_body
{
clear: both;
overflow: hidden;
}
.cal_body .header
{
margin-top: 8px;
}
.cal_body ul
{
clear: both;
}
.cal_body ul li
{
width: 14.285%;
height: 40px;
border: 2px solid #fff;
text-transform: uppercase;
text-align: center;
background-color:#F3F3F3;
float: left;
display: table
}
.label.weekend {
background-color: #52B1B1
}
.days.active {
background-color: #3c79be;
color: #fff
}
.days.active > .header {
display: none
}
.upcoming
{
font-size: 9px;
display: table-cell;
vertical-align: middle;
}
.upcoming > a {
color: #fff;
}
.days
{
border: 1px solid #aaa;
}Und so sieht der tabellenlose Kalender aus:
Der einfachheit halber hier als Bild dargestellt.
Online Website Check
Einzelne Webseiten in wenigen Sekunden auf Fehler überprüfen, Optimierungspotenziale herausfinden und direkt verbessern. Kostenlos und anonym mit unserem Website Check Tools.
Hilfe & Support
Sie haben eine Contao Website und benötigen professionelle Unterstützung für Ihr Projekt im Bereich Webdesign, Programmierung, Software oder Online Marketing? Nehmen Sie Kontakt zu uns auf, wir freuen uns auf Sie.
Cookie- & Analyse Einstellungen
Voreingestellt sind ausschließlich zulässige Cookies, für die keine Einwilligung benötigt wird. Analyse und Tracking, sowie weiteren funktionellen Cookies, können Sie unter "Mehr" durch Anwählen von "Ja" zustimmen.
Weitere Infos zu Cookies und Ihrem Datenschutz stellen wir Ihnen in der Datenschutzerklärung vor.