Drupal: Einen Terminkalender aufbauen Teil 1

Für eine Community-Webseite kann ein Terminkalender durchaus eine feine Sache sein. Grund genug, in diesem und einem weiteren Tutorial einen ebensolchen Kalender Schritt für Schritt aufzubauen. Die Kalender-Anwendung wird sich dabei aus verschiedenen Modulen zusammensetzen.

Wir empfehlen:
Drupal-Training

Der Kalender, der erstellt wird, setzt auf die folgenden Module auf:

Date
Views
FullCalendar

Diese Module werden in dieser Reihenfolge vorgestellt. Los geht es also mit dem Date-Modul. Heruntergeladen werden kann dieses Modul von der Seite http://drupal.org/project/date. Date stellt ein flexibles Kalenderfeld zur Verfügung. Installiert das Modul wie gehabt über Module>Neues Modul hinzufügen. Nachdem das Modul installiert und aktiviert wurde, stehen für die Inhaltstypen drei neue Felder zur Verfügung.

Es wird nun ein neuer Inhaltstyp angelegt. Das geschieht über Struktur>Inhaltstypen>Inhaltstyp hinzufügen.

Tragt dort die folgenden Informationen ein:

Name = Termin
Beschreibung = Termine können hierüber eingetragen werden.
Beschriftung des Titelfeldes = Termin

Deaktiviert im Register Veröffentlichungseinstellungen das Kontrollkästchen Auf der Startseite. Und auch die Option Autor- und Datumsinformationen anzeigen, die im Register Anzeigeeinstellungen zu finden ist, kann man deaktivieren. Die übrigen Einstellungen können unverändert mit Speichern und Felder hinzufügen übernommen werden.

Die grundlegenden Schritte zum Anlegen eines neuen Feldes wurden bereits in einem der vorherigen Tutorials vorgestellt. Tragt in das Feld Neues Feld hinzufügen den Wert Zeit ein. Drupal generiert dadurch automatisch den maschinenlesbaren Namen field_zeit. Als Feldtyp wird Date eingestellt. Unter Steuerelement wählt man Pop-up calendar.

Mit Speichern werden die Einstellungen übernommen. In dem sich daraufhin öffnenden Dialogfenster lässt sich der Kalender konfigurieren. Zunächst einmal kann man im Bereich Date attributes to collect festlegen, wie genau die Termine eingegeben werden sollen. Hier empfiehlt es sich normalerweise, alle Kontrollkästchen bis auf das bei Second zu aktivieren.

 

Eine interessante Funktion hinsichtlich eines Termins ist sicherlich Collect an end date.

Aktiviert man dieses Kontrollkästchen, kann man zu dem Termin eben nicht nur ein Anfangs-, sondern auch ein Enddatum festlegen. Ob es sich dabei um eine Pflichtangabe handelt, also ein Endzeitpunkt tatsächlich angegeben werden muss, lässt sich über das Kontrollkästchen bestimmen.

Das Feld Zeitzone muss nicht angepasst werden. Übernehmt die Einstellungen abschließend mit Einstellungen speichern.

 

Daraufhin gelangt man zu einer weiteren Seite.

 

Hier werden zusätzliche Einstellungen zum Feld Zeit für den Inhaltstyp Termin erwartet. Dieser Aspekt ist wichtig, da man das Feld Zeit für jeden Inhaltstyp unterschiedlich gestalten kann. Öffnet den Bereich More Settings and Values.

Hier lässt sich das Eingabeformat festlegen. Welches letztendlich gewählt wird, ist sicherlich Geschmacksache. Bei Default date stellt man für gewöhnlich Now ein. Dadurch wird das aktuelle Datum angezeigt. Und bei Default end date könnte Same as Default date verwendet werden. Die übrigen Einstellungen kann man normalerweise unverändert mit Einstellungen speichern übernehmen. Dadurch landet man wieder auf der Feldübersicht.

 

Was für einen Termin natürlich auch wichtig ist: der Ort der Veranstaltung. Dafür wird ein weiteres Feld angelegt. Tragt dazu in das Feld Neues Feld hinzufügen den Wert Ort ein. Als Feldtyp wird Text ausgewählt. Steuerelement wird dadurch automatisch Textfeld, was mit Speichern übernommen werden kann.

Die Maximallänge von 255 Zeichen kann man normalerweise auch direkt mit Feldeinstellungen speichern übernehmen. Ob ihr auf der sich daraufhin öffnenden Seite weitere Einstellungen vornehmt, bleibt euch überlassen. Mit Einstellungen speichern bestätigt man diese jedenfalls abschließend. Auf Wunsch könnten natürlich noch weitere Felder angelegt werden, was an dieser Stelle allerdings nicht noch einmal explizit beschrieben werden muss.

 

Insgesamt sollte die Feldübersicht jetzt folgendermaßen aussehen:

Ob das Anlegen der Termine über den neuen Inhaltstyp funktioniert, sollte man – bevor die nächsten Schritte unternommen werden – testen. Ruft dazu Inhalt>Inhalt hinzufügen auf. In der Übersicht sollte der Eintrag Termin erscheinen. Klickt diesen an und gebt einen Termin ein. Mit Speichern werden die Einstellungen bestätigt. Das Anlegen eines Termins klappt nun also bereits. Natürlich ist die jetzige Darstellung aber noch ungenügend, schließlich soll das Ganze in Form eines Kalenders ausgegeben werden. Dazu sind jedoch weitere Schritte notwendig.

Die Ansicht definieren

Die eingegebenen Daten sollen jetzt in die gewünschte Form gebracht werden. Das lässt sich sehr gut über das Modul Views umsetzen, welches kostenlos von der Seite http://drupal.org/project/views heruntergeladen werden kann. Ruft nach dem Download Module>Neues Modul installieren auf, wählt das Archiv aus und bestätigt das mit Installieren.

Wenn ihr euch die Modul-Seite anseht, findet ihr folgenden Hinweis:

The Drupal 7 version of Views requires the Chaos Tool Suite also known as CTools.

Um mit Views arbeiten zu können, benötigt man also die Chaos Tool Suite. Dieses Modul kann von der Seite http://drupal.org/project/ctools heruntergeladen werden. Installiert wird es wie üblich über Module>Neues Modul installieren.

Nachdem die beiden Module installiert wurden, aktiviert man sie unter Module. Aktiviert dort die vor den Einträgen Views, Views UI, Chaos Tools und die Ajax-Variante der Chaos Tools stehenden Kontrollkästchen. Bestätigt dies abschließend mit Konfiguration speichern.

Ruft Struktur>Views auf. Das ist jetzt die zentrale Anlaufstelle zur Definition und Verwaltung der Views bzw. der Ansichten. Auf dieser Seite findet man bereits einige vordefinierte Views. Um euch die Funktionsweise anzusehen, klickt ihr einfach bei einem beliebigen Typ auf aktivieren und anschließend auf den angezeigten Pfad. Sehr schön lässt sich das beispielsweise bei Archive machen. Wird das aufgerufen, ist ein Archiv zu sehen, das nach Monaten geordnet ist.

Das ist also eine typische Ansicht. Und genau eine solche Ansicht soll nun auch für den Kalender definiert werden. Ruft Struktur>Views auf und klickt auf Add new view. In dem sich daraufhin öffnenden Dialogfenster werden allgemeine Informationen zur zukünftigen Ansicht abgefragt.

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

Auch hier gilt wieder, dass ihr später natürlich andere Einstellungen vornehmen könnt, die eventuell besser zum Inhalt eurer Seite passen. Wenn ihr wollt, könnt ihr die Termine außerdem in einem Block anzeigen. Dazu muss das Kontrollkästchen Create a block aktiviert werden.

Dort könnt ihr prinzipiell dann dieselben Einstellungen wie unter Create a page vornehmen. Aber auch das variiert sicherlich von Fall zu Fall. Mit Continue & edit geht es zum nächsten Dialogfenster. Welche Funktionen sich hier verbergen und welche Schritte noch nötig sind, um einen Kalender aufzubauen, erfahrt ihr dann im nächsten Tutorial.

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