Contao (Teil 30): Der persönliche Terminkalender

Mit dem Modul Events bietet Contao beispielsweise die Möglichkeiten, eine durchaus ansprechende Terminverwaltung in Webseiten zu integrieren. In diesem Video-Training wird gezeigt, wie sich 'Events' für den Aufbau eines Veranstaltungskalenders nutzen lässt. Dabei lassen sich die Termine bequem im Backend eintragen und dann auf ganz unterschiedliche Art und Weise im Frontend präsentieren. Wer also einen entsprechenden Kalender benötigt, wird mit Events sicherlich das nötige Rüstzeug bekommen.
Ich werde die Funktionsweise von Events anhand eines konkreten Beispiels zeigen. Am Ende wird es einen Terminkalender geben, in dem sich Termine bequem eintragen lassen. Die jeweiligen Termine sind dann im Frontend anklickbar. Klickt man einen der Termine an, werden zu diesem die entsprechenden Detailinformationen angezeigt.
Zunächst einmal muss eine Seite angelegt werden, auf der man den eigentlichen Kalender anzeigt. Das geschieht wieder über Layout>Seitenstruktur>Neue Seite. Legt die Position der neuen Seite fest, weist ihr den Namen Kalender zu und achtet darauf, dass sie veröffentlicht ist. Mehr ist nicht nötig, die Seite kann also mit Speichern und schließen erstellt werden.
Neben der zuvor erstellten Kalender-Seite wird auch noch eine für die Termine benötigt. Bei dieser Seite muss es sich um eine Unterseite von Kalender handeln. Ruft also Layout>Seitenstruktur>Neue Seite auf und klickt in der Zeile Kalender auf das Symbol In die Seite ID xx einfügen.
Als Seitennamen kann man Termine angeben. Aktiviert außerdem die beiden Optionen Im Menü verstecken und Seite veröffentlichen. Die Seite kann dann mit Speichern und schließen erstellt werden.
Damit gibt es jetzt also die beiden Seiten Kalender und Termine. Diesen muss man nun noch Leben einhauchen.
Als Titel könnte man beispielsweise Veranstaltungen eintragen. Klickt anschließend bei Weiterleitungsseite auf Auswahl ändern. Jetzt kommt die zuvor erstellte und im Menü versteckte Termine-Seite ins Spiel. Aktiviert deren Radiobutton und übernehmt das Ganze mit Anwenden.
Im Bereich Zugriffsschutz könntet ihr den Kalender jetzt sogar nur für ganz bestimmte Frontend-Gruppen sichtbar machen. So etwas ist natürlich praktisch, wenn es sich um interne Termine usw. handelt. Ich belasse die Einstellungen im aktuellen Beispiel allerdings unverändert und übernehme sie direkt mit Speichern und schließen.
Daraufhin landet man wieder in der Kalenderübersicht, in der jetzt schon mal der zuvor erstellte Kalender zu sehen ist.
Und in eben jenen Kalender fügt man nun die Termine ein.
Das sich daraufhin öffnende Dialogfenster ist vergleichsweise komplex und verdient daher eine genauere Betrachtung.
Zunächst wäre da das Feld Titel. Tragt hier den Titel des Termins ein. Zu sehen ist der Titel in der allgemeinen Kalender- und in der Detailansicht des Termins. Ein typischer Titel könnte Contao-Workshop sein. Einen Event-Alias müsst ihr nicht explizit angeben, das erledigt Contao beim Speichern des Termins automatisch. Über das Feld Autor gibt man an, wer den Termin veröffentlicht hat. Beachtet, dass es sich dabei um eine Pflichtangabe handelt.
Weiter geht es mit dem Bereich Datum und Zeit, der für eine effektive Terminplanung natürlich unersetzlich ist. In jedem Fall muss das Startdatum angegeben werden. Klickt dazu auf das Symbol Datum auswählen und stellt das entsprechende Datum ein. Ob ihr das Feld Enddatum ausfüllt, hängt von der Art des Termins ab. Handelt es sich um einen eintägigen Termin, bleibt das Feld leer. Geht der Termin hingegen über mehrere Tage, könnt ihr das Enddatum angeben. Auch das geschieht über die Schaltfläche Datum auswählen.
Termine beginnen oft zu einer ganz bestimmten Zeit. Das lässt sich ebenfalls im Kalender abbilden. Aktiviert dazu das Kontrollkästchen Zeit hinzufügen. Daraufhin sind zusätzliche Optionen zu sehen.
Über diese lassen sich Start- und Endzeit des Termins festlegen.
Angeben kann man ebenfalls den Veranstaltungsort, an dem der Termin letztendlich stattfindet. Dabei kann es sich um eine Stadt, aber beispielsweise auch um einen Veranstaltungsraum handeln.
Weiter geht es mit dem Feld Teasertext. Hier könnt ihr den Text angeben, der zu sehen sein soll, wenn man den Kalender in der normalen Ansicht öffnet. Ihr solltet in dieses Feld also kurz und knackig die wichtigsten Informationen zum Termin eintragen. Contao ermöglicht es euch außerdem, jedem Termineintrag ein Bild hinzuzufügen. Aktiviert dazu die Option Ein Bild hinzufügen. Über die Schaltfläche Auswahl ändern, die unterhalb von Quelldatei zu sehen ist, lässt sich das Bild dann einstellen.
Der in das Feld Alternativer Text eingetragene Text wird dem
Findet ein Termin regelmäßig statt, könnt ihr die Option Event wiederholen aktivieren. Das blendet zusätzliche Optionen ein.
Darüber kann man das Intervall und die Anzahl der Wiederholungen angeben.
Werden zu einem Termin bestimmte Dokumente benötigt, wird der Bereich Anlagen interessant. Die ausgewählten Dateien können in der Detailansicht des betreffenden Termins heruntergeladen werden.
Im Bereich Weiterleitungsziel kann man festlegen, welche Seite bzw. welcher Inhalt nach dem Anklicken des Termins zu sehen sein soll. Normalerweise wird man auf die Seite umgeleitet, die man in den Kalendereinstellungen angegeben hat. Ihr könnt aber beispielsweise auch Externe URL wählen, um so auf eine Seite außerhalb eures Projekts zu verweisen, auf der dann ausführliche Informationen zu diesem Termin zu finden sind.
Entscheidend ist abschließend der Bereich Veröffentlichung. Soll der Termin im Kalender zu sehen sein, muss man das Kontrollkästchen Event veröffentlichen aktivieren. Erst dann wird der Termin tatsächlich im Kalender angezeigt.
Seid ihr mit den Einstellungen bezüglich des Termins zufrieden, könnt ihr diese mit Speichern und schließen übernehmen.
Zunächst einmal muss eine Seite angelegt werden, auf der man den eigentlichen Kalender anzeigt. Das geschieht wieder über Layout>Seitenstruktur>Neue Seite. Legt die Position der neuen Seite fest, weist ihr den Namen Kalender zu und achtet darauf, dass sie veröffentlicht ist. Mehr ist nicht nötig, die Seite kann also mit Speichern und schließen erstellt werden.
Neben der zuvor erstellten Kalender-Seite wird auch noch eine für die Termine benötigt. Bei dieser Seite muss es sich um eine Unterseite von Kalender handeln. Ruft also Layout>Seitenstruktur>Neue Seite auf und klickt in der Zeile Kalender auf das Symbol In die Seite ID xx einfügen.
Als Seitennamen kann man Termine angeben. Aktiviert außerdem die beiden Optionen Im Menü verstecken und Seite veröffentlichen. Die Seite kann dann mit Speichern und schließen erstellt werden.
Damit gibt es jetzt also die beiden Seiten Kalender und Termine. Diesen muss man nun noch Leben einhauchen.
Den Kalender anlegen
Damit man die Termine später überhaupt eintragen kann, wird natürlich ein Kalender benötigt. Erstellt werden Kalender über Inhalte>Events. Die daraufhin angezeigte Übersicht wird bei euch sicherlich noch leer sein. Folgt daher dem Link Neuer Kalender im oberen Fensterbereich.Im Bereich Zugriffsschutz könntet ihr den Kalender jetzt sogar nur für ganz bestimmte Frontend-Gruppen sichtbar machen. So etwas ist natürlich praktisch, wenn es sich um interne Termine usw. handelt. Ich belasse die Einstellungen im aktuellen Beispiel allerdings unverändert und übernehme sie direkt mit Speichern und schließen.
Und in eben jenen Kalender fügt man nun die Termine ein.
Termine erstellen
Um es vorwegzunehmen: In Contao arbeitet man nicht mit dem Begriff Termine. Stattdessen wird normalerweise Events verwendet. (Wobei es Termine in vielen Fällen besser trifft). Um nun einen neuen Termin bzw. ein Event anzulegen, ruft man Inhalte>Events auf und klickt auf das Stiftsymbol, das bei dem betreffenden Kalender angezeigt wird. Im oberen Fensterbereich folgt man dem Link Neues Event.Das sich daraufhin öffnende Dialogfenster ist vergleichsweise komplex und verdient daher eine genauere Betrachtung.
Zunächst wäre da das Feld Titel. Tragt hier den Titel des Termins ein. Zu sehen ist der Titel in der allgemeinen Kalender- und in der Detailansicht des Termins. Ein typischer Titel könnte Contao-Workshop sein. Einen Event-Alias müsst ihr nicht explizit angeben, das erledigt Contao beim Speichern des Termins automatisch. Über das Feld Autor gibt man an, wer den Termin veröffentlicht hat. Beachtet, dass es sich dabei um eine Pflichtangabe handelt.
Termine beginnen oft zu einer ganz bestimmten Zeit. Das lässt sich ebenfalls im Kalender abbilden. Aktiviert dazu das Kontrollkästchen Zeit hinzufügen. Daraufhin sind zusätzliche Optionen zu sehen.
Über diese lassen sich Start- und Endzeit des Termins festlegen.
Angeben kann man ebenfalls den Veranstaltungsort, an dem der Termin letztendlich stattfindet. Dabei kann es sich um eine Stadt, aber beispielsweise auch um einen Veranstaltungsraum handeln.
Der in das Feld Alternativer Text eingetragene Text wird dem
alt
-Attribut des img
-Elements zugewiesen. Über die weiteren Optionen im Bereich Bildeinstellungen kann man das Bild noch ganz detailliert konfigurieren. Die Optionen sind aber sicherlich selbsterklärend.Darüber kann man das Intervall und die Anzahl der Wiederholungen angeben.
Werden zu einem Termin bestimmte Dokumente benötigt, wird der Bereich Anlagen interessant. Die ausgewählten Dateien können in der Detailansicht des betreffenden Termins heruntergeladen werden.
Im Bereich Weiterleitungsziel kann man festlegen, welche Seite bzw. welcher Inhalt nach dem Anklicken des Termins zu sehen sein soll. Normalerweise wird man auf die Seite umgeleitet, die man in den Kalendereinstellungen angegeben hat. Ihr könnt aber beispielsweise auch Externe URL wählen, um so auf eine Seite außerhalb eures Projekts zu verweisen, auf der dann ausführliche Informationen zu diesem Termin zu finden sind.
Seid ihr mit den Einstellungen bezüglich des Termins zufrieden, könnt ihr diese mit Speichern und schließen übernehmen.
Weitere Teile
- Tutorial: Contao (Teil 01): Das ist Contao
- Tutorial: Contao (Teil 02): Die lokale Installation
- Tutorial: Contao (Teil 03): Das erste Mal im Backend
- Tutorial: Contao (Teil 04): Die wichtigsten Grundeinstellungen vornehmen
- Tutorial: Contao (Teil 05): Perfekte Dateiverwaltung
- Tutorial: Contao (Teil 06): Seiten anlegen
- Tutorial: Contao (Teil 07): Ein Theme erstellen
- Tutorial: Contao (Teil 08): Frontend-Module einbinden
- Tutorial: Contao (Teil 09): Einen ersten Artikel schreiben
- Tutorial: Contao (Teil 10): Das Hauptmenü anlegen und einbinden
- Tutorial: Contao (Teil 11): Die Frontend-Ausgabe gestalten
- Tutorial: Contao (Teil 12): Den Haupt- und den Fußbereich gestalten
- Tutorial: Contao (Teil 13): Inhaltselemente (1)
- Tutorial: Contao (Teil 14): Inhaltselemente (2)
- Tutorial: Contao (Teil 15): Formulare anlegen
- Tutorial: Contao (Teil 16): Formularfelder einfügen
- Tutorial: Contao (Teil 17): Der Webseite eine Suchfunktion spendieren
- Tutorial: Contao (Teil 18): Die individuelle Suchfunktion
- Tutorial: Contao (Teil 19): Ein vertikales Menü aufbauen
- Tutorial: Contao (Teil 20): Ein horizontales Menü aufbauen
- Tutorial: Contao (Teil 21): Die Mitgliederverwaltung
- Tutorial: Contao (Teil 22): Notwendige Module für die Mitgliederverwaltung
- Tutorial: Contao (Teil 23): Den Login-Bereich komfortabler gestalten
- Tutorial: Contao (Teil 24): Einen Downloadbereich einrichten
- Tutorial: Contao (Teil 25): Benutzergruppen für das Backend anlegen
- Tutorial: Contao (Teil 26): Backend-Benutzer anlegen
- Tutorial: Contao (Teil 27): Die Zugriffsrechte festlegen
- Tutorial: Contao (Teil 28): Nachrichten schreiben
- Tutorial: Contao (Teil 29): Die Nachrichten im Frontend anzeigen
- Contao (Teil 30): Der persönliche Terminkalender
- Tutorial: Contao (Teil 31): Events im Frontend anzeigen
- Tutorial: Contao (Teil 32): Eine FAQ-Liste aufbauen
- Tutorial: Contao (Teil 33): Der perfekte Newsletter
- Tutorial: Contao (Teil 34): Newsletter im Frontend
- Tutorial: Contao (Teil 35): Den Funktionsumfang mit Extensions erweitern
- Tutorial: Contao (Teil 36): Google Maps in die Webseite einbinden
- Tutorial: Contao (Teil 37): Suchmaschinenoptimierung (1)
- Tutorial: Contao (Teil 38): Suchmaschinenoptimierung (2)
- Tutorial: Contao (Teil 39): Suchmaschinenoptimierung (3)
- Tutorial: Contao (Teil 40): Updates und Backups

Passend zum Inhalt empfehlen wir:
Mockup- und Header-Generator
Danke für dieses Video
Vielen Dank für diesen Teil - viele liebe Grüße
C.
Vielen Dank für den weiteren Teil des Tutorials. Wieder verständlich erklärt.
Herzlichen Dank für das Tutorial.
Vielen Dank für diesen weiteren Teil Deiner Reihe.
VIelen Dank auch für diesen informativen Teil der Reihe.
Vielen Dank für den weiteren tollen Teil dieser Reihe!
Vielen Dank für die Tutorial-Reihe.
@vultur_lupus hmm mir geht es genauso, der fehlt mir noch.
@siegi2222 ok danke, dann lade ich mir den so, die Punkte ist das mehr als wert!. :-)
Vielen Dank, dass es weitergeht! Wie immer gut erklärt!
PS: ad vultur_lupus -- ja, stand schon am 18.1.2014 zur Verfügung .....
Ich verneige mich ganz tief, für diese Klasse-Arbeit und Gesamt Dokumentation :)))
Danke!
PS Habe ich Teil 29 verpasst?
Sehr interessant. Vielen Dank.
Vielen Dank für den weiteren Teil der Reihe. Sehr informativ und verständlich.
Vielen Dank für diesen neuen Teil der Reihe.
Wie immer sehr gut erklärt. Danke
Herzlichen Dank für das Video-Tutorial.
Vielen Dank für diesen weiteren Teil Deiner tollen Reihe.
Habe ich den Teil 29 verpasst oder kommt der noch?