Drupal: Einen Terminkalender aufbauen Teil 2

Nachdem im ersten dieser beiden Terminkalender-Tutorials bereits einige grundlegende Schritte erledigt wurden, geht es nun weiter mit dem Aufbau des Terminkalenders. Definiert wird in diesem Tutorial die passende Ansicht, mit der sich der Kalender bzw. die darin eingetragenen Termine im Frontend ansprechend präsentieren lassen. Zurückgegriffen wird dabei auf das bekannte jQuery-Plugin FullCalendar, mit dem man tatsächlich echte Kalender in seine Webseite integrieren kann.

Wir empfehlen:
Drupal-Training

Der erste Teil dieses Tutorials endete mit dem Anlegen einer neuen Ansicht unter Struktur>Views>Add new view. Für die neue Ansicht werden die folgenden Einstellungen vorgenommen:

View name = Termine
Anzeigen = Inhalt
of type = Termin
Create page aktivieren
Seitentitel Termine
Pfad = Termine
Display format = Tabelle

Diese Einstellungen werden mit Continue & Edit bestätigt. Klickt in dem sich daraufhin öffnenden Fenster bei Fields auf hinzufügen.

 

Aktiviert dort die Kontrollkästchen vor den folgenden drei Feldern:

Inhalt: Body
Inhalt: Ort
Inhalt: Zeit

Mit Apply (all displays) werden die Einstellungen übernommen. Daraufhin wird jeweils ein Konfigurationsfenster für die Felder geöffnet.

Was hier eingetragen wird, ist sicherlich Geschmackssache und variiert von Webseite zu Webseite bzw. Kalender zu Kalender. Im Fall von Inhalt: Body könnte man in das Feld Beschriftung aber beispielsweise Terminbeschreibung eintragen.

 

Mit Apply (all displays) werden die Angaben für das erste Feld bestätigt. Drupal öffnet daraufhin das zweite Fenster, mit dem sich das nächste Feld, das zuvor angelegt wurde, konfigurieren lässt. Zu erkennen ist das auch sehr schön an den Pfeilen, die im oberen Fensterbereich zu sehen sind.

Passt die weiteren Felder dann ebenfalls euren Anforderungen entsprechend an. Abschließend übernimmt man die Einstellungen mit Apply (all displays).

 

Im unteren Fensterbereich findet ihr eine Vorschau.

Daran kann man schon mal erkennen, wie die Ansicht letztendlich aussehen wird.

 

Die Anzeige im Frontend

Die neue Ansicht soll nun natürlich auch im Frontend sichtbar gemacht werden. Das geschieht ebenfalls innerhalb der gezeigten Übersicht. Interessant ist zunächst einmal der Bereich Page Settings.

Über Pfad könnt ihr den Pfad zum Terminkalender angeben. Klickt den Pfad an, wenn ihr ihn ändern wollt. Weiter geht es mit dem Menüeintrag. Um das Menü auszuwählen, in das der Eintrag aufgenommen werden soll, klickt man bei Menu auf No menu. In dem sich öffnenden Fenster sind die verfügbaren Eintragstypen aufgelistet. Aktiviert die Radio-Box vor dem gewünschten Typ. Hier solltet ihr einfach testen, welche Variante ideal für die Seite ist. Auch das muss wieder mit Apply bestätigt werden. Richtig liegt ihr auf alle Fälle mit Normal menu entry. Wird das davorstehende Kontrollkästchen aktiviert, können zusätzliche Angaben zum Menüpunkt gemacht werden.

Dazu gehören der Titel und die Beschreibung.

Titel = Meine Termine
Beschreibung = Eine Übersicht meiner Termine.

 

Aus dem Feld Menu wird das Menü ausgewählt, in dem der Eintrag letztendlich angezeigt werden soll. Im aktuellen Beispiel wird Navigation eingestellt. Mit Apply übernimmt man die Einstellungen. Vergesst nicht, übrigens auch auf der sich daraufhin öffnenden Seite, die Einstellungen mit Speichern zu übernehmen.

 

Ein anschließender Blick ins Frontend der Seite liefert das gewünschte Ergebnis. Im Navigations-Menü gibt es den neuen Menüeintrag Meine Termine. Klickt man diesen an, werden alle eingetragenen Termine aufgelistet.

Auf diese Weise könnt ihr nun nach und nach neue Termine anlegen. Deren Präsentation ist jetzt schon deutlich übersichtlicher geworden. Es geht aber noch besser. Mehr dazu im zweiten Teil dieses Tutorials. Testet zunächst jedoch einmal, ob die Definition des Kalenders bislang tatsächlich erfolgreich war. Legt also über Inhalt>Inhalt hinzufügen einen neuen Termin an und lasst euch die Termin-Ansicht dann noch einmal im Frontend anzeigen. Ist der Termin dort ebenfalls zu sehen, können die nächsten Schritte übernommen werden.

 

Die Anzeige verbessern

Wer jQuery kennt, dem ist vielleicht bereits schon das Plug-In FullCalendar begegnet. Wenn dem nicht so ist, werft einen Blick auf die Seite http://arshaw.com/fullcalendar/.

Mit diesem Plug-In lassen sich also interaktive Kalender in die eigene Webseite einbinden. Und genau so etwas ist natürlich interessant, wenn man seine Termine in Drupal ebenfalls optisch ansprechend veröffentlichen will. Um das umzusetzen, werden zwei Dinge benötigt:

• Das jQuery-Plug-In FullCalendar. Dieses Plug-In kann kostenlos von der Seite http://arshaw.com/fullcalendar/download/ heruntergeladen werden. Das stellt die Kernfunktionalität des Kalenders zur Verfügung.
• Das Drupal-Modul FullCalendar. Dieses Modul findet ihr auf der Seite http://drupal.org/project/fullcalendar. Momentan gibt es von diesem Modul noch keine finale Version für Drupal 7. Der angebotene Release-Candidate arbeitet aber zuverlässig und kann durchaus verwendet werden.

Beides muss innerhalb eurer Drupal-Umgebung installiert werden. Los geht es mit dem jQuery-Plug-In. Ladet euch dieses Plug-In herunter und entpackt es. Innerhalb des entpackten Verzeichnisses liegt das Verzeichnis fullcalendar. Kopiert dieses Verzeichnis nach sites/all/libraries innerhalb eurer Drupal-Installation. Sollte es das libraries-Verzeichnis noch nicht geben, legt ihr es zunächst an. Insgesamt sollte die Verzeichnisstruktur folgendermaßen aussehen:

 

Weiter geht es mit der Installation des Drupal-Moduls FullCalendar. Ruft nach dem Download dieses Moduls innerhalb von Drupal Module>Neues Modul installieren auf. Wählt das heruntergeladene Archiv aus und bestätigt dies mit Installieren. Folgt anschließend dem Link Enable newly added modules und aktiviert die vor den FullCalendar-Einträgen stehenden Kontrollkästchen. Mit Konfiguration speichern übernehmt ihr die Einstellungen.

Damit sind die Vorarbeiten abgeschlossen und die neue FullCalender-Ansicht kann angewendet werden. Ruft dazu Struktur>Views auf und klickt bei Termin auf Bearbeiten. Folgt anschließend unter Format dem Link Tabelle. (Wenn ihr für die Darstellung zuvor etwas anderes als Tabelle gewählt habt, müsst ihr auf den betreffenden Link klicken).

 

Innerhalb des sich daraufhin öffnenden Dialogfensters aktiviert man FullCalendar und bestätigt dies mit Apply (all displays). Vergesst nicht, alle weiteren Dialogfenster ebenfalls abzuspeichern. Mehr ist jetzt tatsächlich nicht nötig. Sobald im Frontend die Terminübersicht aufgerufen wird – das geht übrigens nach wie vor über den bereits bekannten Link –, wird der Kalender angezeigt.

Innerhalb dieses Kalenders sind die eingetragenen Termine farbig hinterlegt. Klickt man einen dieser Termine an, wird die altbekannte Terminansicht geöffnet. Der Kalender selbst kann durchgeblättert werden. Anwender können also zwischen den Monaten hüpfen. Ebenso ist die Ansicht frei wählbar. So kann zwischen einer Monats-, Wochen- und Tagesansicht hin und hergewechselt werden.

Wir empfehlen:
Dreamweaver-Video-Training

Unsere Empfehlung für dich

Bootstrap für modernes Webdesign

Bootstrap für modernes Webdesign

Ob Smartphone, Tablet oder PC – Größe spielt keine Rolle mehr! Mit Bootstrap schmiegen sich Content und Design wie von Geisterhand an jedes Format. Lerne in 12 Lektionen und 2,5 Stunden Video-Training, wie dir das beliebte Framework Bootstrap den Weg zur responsiven Website erleichtert.

  • Funktionen, Komponenten, Möglichkeiten: Bootstrap kennenlernen und bedienen
  • In der Praxis: Am Live-Beispiel von der Basis bis zur responsiven Website
  • Zum Mitmachen und Nachvollziehen inklusive der Arbeitsdateien

Zum Training