Anzeige
Tutorialbeschreibung

Contao (Teil 31): Events im Frontend anzeigen

Contao (Teil 31): Events im Frontend anzeigen

Im Backend der Seite wurden nun bereits einige Events angelegt. Das Problem dabei: Im Frontend der Seite ist davon nach wie vor nichts zu sehen. Das ändert sich mit diesem Video-Training. Denn jetzt wird tatsächlich für die Anzeige des Kalenders und der darin enthaltenen Events gesorgt. Am Ende dieses Video-Trainings werdet ihr einen Kalender haben, über den ihr eure Termine ganz bequem verwalten und veröffentlichen könnt.


... übrigens findest du die komplette Serie hier: CMS Contao – Video-Tutorial für Einsteiger - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Zunächst soll im Frontend der Kalender angezeigt werden. Das geschieht, wie bei Contao üblich, mittels eines Moduls. Die entsprechenden Einstellungen nimmt man unter Layout>Themes vor. Klickt dort bei dem betreffenden Theme auf das Symbol Die Frontend-Module des Themes ID xx bearbeiten.

Bilder



 
In dem sich daraufhin öffnenden Fenster folgt man dem Link Neues Modul. Als Titel könnte Kalender anzeigen gewählt werden. Wichtig ist aber vor allem wieder das Feld Modultyp. In diesem Feld stellt man unterhalb von Events den Eintrag Kalender ein. Das führt zur Anzeige zusätzlicher Optionen. Entscheidend ist der Bereich Modul-Konfiguration. Unter Kalender sind dort nämlich all die Kalender aufgeführt, die ihr bereits angelegt habt. Aktiviert im aktuellen Beispiel das vor Veranstaltungen stehende Kontrollkästchen.

Bilder



Standardmäßig zeigt Contao von Hause aus mehrtägige Ereignisse an jedem Tag einzeln an. Aktiviert man die Option Verkürzte Darstellung, reduziert Contao die Anzeige solcher Events, sodass sie lediglich einmalig am ersten Tag zu sehen sind.

Das Auswahlfeld Erster Wochentag braucht man nicht zu verändern, da der Montag wohl in den meisten Fällen tatsächlich der erste Wochentag sein dürfte.

Die Weiterleitungsseite müsst ihr normalerweise nicht anpassen, da ihr ja bereits eine entsprechende Seite erstellt habt. Bei der handelt es sich, noch einmal zur Erinnerung, um die Seite Termine, die als Unterseite von Kalender definiert wurde. Wenn ihr eine entsprechende Weiterleitungsseite definiert, sollte auf dieser eines der beiden Frontend-Module Eventliste oder Kalender eingebunden sein.

 
Weiter geht es mit dem Auswahlfeld Kalendar-Template.

Bilder



Über dieses Feld bestimmt man letztendlich, wie der Kalender im Frontend angezeigt werden soll. Angeboten werden die beiden Templates cal_default und cal_mini. Das Template cal_default bindet einen großen Kalender ein, in dem die einzelnen Termine aufgelistet sind und direkt angeklickt werden können. Anders stellt sich die Sache bei cal_mini dar. Dieses Template sorgt für die Anzeige eines Mini-Kalenders. In diesem sind dann keine direkten Links auf die einzelnen Termine enthalten. Stattdessen fügt Contao Links auf die jeweiligen Tage ein. Probiert einfach aus, welches der Templates euch am besten gefällt. Normalerweise fährt man allerdings mit dem Template cal_default am besten.

Die weiteren Optionen unter Zugriffsschutz und Experten-Einstellungen kennt ihr bereits vom Umgang mit anderen Modulen. Legt das Modul jetzt mit Speichern und neu an.


 

Ein weiteres Modul anlegen

Dadurch wird noch einmal dasselbe Dialogfenster geöffnet. Tatsächlich muss jetzt nämlich ein weiteres Modul erstellt werden. Denn das zuvor angelegte Modul dient ausschließlich der Anzeige des Kalenders. Die Termine selbst sollen aber natürlich ebenfalls zu sehen sein. Und genau das wird mit dem neuen Modul erledigt. Als Titel könnte Termine anzeigen gewählt werden. Wichtig ist zudem das Feld Modultyp. Stellt hier unterhalb von Events den Eintrag Eventleser ein.

Bilder



Auch das führt wieder zur Anzeige einiger zusätzlicher Optionen. Zunächst wäre da der Bereich Kalender. Aktiviert hier die Kalender, aus denen die Termine für die Anzeige gezogen werden sollen. Im aktuellen Beispiel wird der euch bekannte Kalender Veranstaltungen eingestellt.

Wie die Termine im Frontend letztendlich angezeigt werden, bestimmt man über das Feld Event-Template. Ihr solltet hier einfach mal die verfügbaren Templates ausprobieren und dann entscheiden, was am besten zu eurem Kalender passt. Ich stelle event_full ein, was zu einer Art Großansicht der Termine führt.

Weitere Einstellungen sind nicht nötig, das Modul kann also mit Speichern und schließen gespeichert werden.


 

Die Frontend-Module einbinden

Die notwendigen Module sind damit vorhanden. Im Frontend der Seite ergibt sich aber nach wie vor noch nicht das gewünschte Ergebnis. Damit sich das ändert, müssen die Module nämlich noch in die entsprechenden Seiten eingebunden werden. Und genau darum geht es jetzt.

Die notwendigen Einstellungen dazu werden unter Inhalte>Artikel vorgenommen. (Ich gehe davon aus, dass ihr die Seitenstruktur bereits so angelegt habt, wie das im vorherigen Tutorial beschrieben wurde. Es gibt also die Seite Kalender, der die Seite Termine als Unterseite zugewiesen wurde). Entscheidend ist zunächst die Seite Kalender.

Bilder



 
Klickt bei dieser Seite bei Kalender [Hauptspalte] auf das Stiftsymbol. Folgt im oberen Fensterbereich dem Link Neues Element. Nachdem die Position dieses Elements festgelegt wurde, kann man dieses genauer beschreiben. Als Elementtyp wird unter Include-Elemente der Eintrag Modul ausgewählt. Contao zeigt daraufhin in dem Auswahlfeld Modul eine Liste der von euch bislang angelegten Module. Stellt hier das Modul Kalender anzeigen ein.

Bilder



Weitere Anpassungen sind in diesem Dialogfenster nicht nötig. Das Modul kann also mit Speichern und schließen erstellt werden.

 
Öffnet erneut den Artikelbaum über Inhalte>Artikel. Entscheidend ist nun die Unterseite Termine von Kalender.

Bilder



Sollte diese nicht zu sehen sein, blendet ihr sie durch Anklicken des Plussymbols bei Kalender ein. Klickt anschließend bei Termine [Hauptspalte] auf das Stiftsymbol. Folgt im oberen Fensterbereich dem Link Neues Element und legt anschließend die Position dieses neuen Elements fest. (Da es sich wahrscheinlich um das erste Element handelt, habt ihr hier freie Wahl). Entscheidend ist in dem daraufhin angezeigten Dialogfenster wieder das Auswahlfeld Elementtyp. In diesem Feld stellt man erneut Modul ein. Das Modul, was nun ausgewählt werden muss, ist Termine anzeigen.

Ihr könntet nun noch die bereits bekannten Einstellungen bezüglich des Zugriffsschutzes, der CSS-Klassen usw. anpassen. Seid ihr mit den Angaben zufrieden, legt ihr das Modul mit Speichern und schließen an.


 

Der Kalender im Frontend

Weitere Einstellungen sind nun tatsächlich erst mal nicht nötig, um den Kalender im Frontend anzuzeigen.

Bilder



Wenn ihr bereits einige Events angelegt habt, sind diese dann auch direkt im Kalender zu sehen. Klickt man einen der Kalendereinträge an, sind dessen Detailinformationen zu sehen. Auf diese Weise könnt ihr also Schritt für Schritt den Kalender aufbauen und mit Inhalten füllen.


Weitere Teile


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Shikaschima
  • 09.07.2015 - 16:15

Das Tutorial ist zwar recht gut beschrieben (auch wenn nach 30 Lektionen ich es schade finde, nicht selber darauf zu kommen, die Artikel zu erstellen), jedoch wundere ich mich darüber, dass der Kalender nur von der Backend Seite aus bearbeitet werden kann. Gibt es keine Möglichkeit, Events im Frontend zu erstellen?

Portrait von Cherifa
  • 12.05.2014 - 10:15

vielen Dank für dieses TUT - viele liebe Grüße

C.

Portrait von MicroSmurf
  • 02.05.2014 - 12:32

Vielen Dank für den weiteren Teil des Tutorials. Wieder verständlich erklärt.

Portrait von Kundentest
  • 20.04.2014 - 22:37

Herzlichen Dank für das Tutorial.

Portrait von Caesarion2004
  • 20.04.2014 - 16:32

Vielen Dank für diesen informativen Teil der Reihe.

Portrait von BOPsWelt
  • 20.04.2014 - 16:07

Danke für das Tutorial.

Portrait von Figib
  • 20.04.2014 - 14:07

Vielen Dank für das Tutorial!

Portrait von Steve007
  • 20.04.2014 - 12:48

Vielen Dank für diesen weiteren Teil Deiner interessanten Contao - Reihe.

Portrait von mecator
  • 22.01.2014 - 05:51

Kurz, knackig, auf den Punkt gebracht - so wie ich es mag.
Vielen Dank!

Portrait von Figib
  • 22.01.2014 - 00:40

Danke für das Tutorial!

Portrait von misssaxonia
  • 21.01.2014 - 23:23

wie immer sehr interessant und informativ.

Portrait von Caesarion2004
  • 21.01.2014 - 23:01

Vielen Dank für den weiteren Teil!

Portrait von Kundentest
  • 21.01.2014 - 20:23

Herzlichen Dank für das weitere Video.

Portrait von MicroSmurf
  • 21.01.2014 - 20:19

Sehr interessant. Vielen Dank für diesen Teil.

Portrait von Steve007
  • 21.01.2014 - 19:48

Vielen Dank für diesen weiteren Teil Deiner Serie.

x
×
×