Ein »Add to Calendar«-Button für Backdrop

Vor einiger Zeit bat mich eine Organisation, deren Backdrop-Website ich betreue, um die Erweiterung ihrer Veranstaltungstermine: Besucherinnen und Besucher sollten die Möglichkeit erhalten, Termine von der Website zu ihrem eigenem Kalender hinzuzufügen – eine Funktion, die allgemein unter der Bezeichnung »Add to Calendar« bekannt ist. (Da die deutsche Übersetzung »Zum Kalender hinzufügen« etwas sperrig ist, bleibe ich im Folgenden bei der englischen Bezeichnung.)

Technische Grundlage des Add-to-Calendar-Features ist in der Regel eine iCalendar-Datei mit ICS-Endung. iCal ist ein anerkannter Standard, der von gängigen Kalenderprogrammen unterstützt wird. Wie erwartet, habe ich auf den Add-On-Seiten von Backdrop CMS auch Zusatzmodule gefunden, die zur Umsetzung in Frage kamen: Add to Cal und Views iCal Export.

Allerdings bekam ich bald den Eindruck, dass keins der Module mir wirklich weiterhilft. »Add to Cal« ist zwar zugeschnitten auf meinen Anwendungsfall (»display of date fields so that they can be added into an external calendar«), doch praktisch funktioniert das Modul einfach nicht. Offenbar wird das Projekt nicht mehr gepflegt, und mir fehlen die Kapazitäten, das Modul funktionsfähig zu machen.

Das zweite Modul, »Views iCal Export«, wird hingegen zuverlässig betreut und weiterentwickelt. Dessen typischer Anwendungsfall ist jedoch die Bereitstellung von Kalender-Feeds, die es Besucher:innen ermöglichen, ganze Kalender zu abonnieren. Dieses Feature nutzt die Organisation sogar bereits auf ihrer Website. Doch nun ging es ja um das Hinzufügen einzelner Termine.

Im Austausch mit der Maintainerin von »Views iCal Export« und zu ihrer eigenen Überraschung hat sich dann herausgestellt, dass das Modul unter Rückgriff auf ein paar Kniffe in der Datenbankabfrage mit Views durchaus in der Lage ist, einen Add-to-Calendar-Link für Einzeltermine bereitzustellen. Wie das geht, zeige ich in den folgenden Abschnitten.

Inhaltstyp und Termine bereitstellen

• Verwende einen Inhaltstyp von deiner Backdrop-Website, der für Termine geeignet ist, nennen wir ihn z.B. »Veranstaltung«.
• Neben Titel und einem Textfeld für die Beschreibung benötigt der Inhaltstyp je ein Feld für den Ort sowie für Datum und Uhrzeit der Veranstaltung – letzteres möglichst mit der Option, auch das Enddatum anzugeben.
• Lege ein paar Beiträge vom Typ »Veranstaltung« an.

Einen Views-Block erstellen

• Erstelle eine Views-Ansicht für Inhalt vom Typ »Veranstaltung«, der Felder in einem Block anzeigt.
• Füge folgende Felder zur Ansicht hinzu: Beitrags-ID, Titel, Datum und Uhrzeit, Ort
• Stelle nun sicher, dass Felder für den Block übersteuert werden.
• Füge einen Kontextfilter nach Beitrags-ID zur Ansicht hinzu, Option »Vorgabewert bereitstellen« mit Typ »Beitrags-ID aus der URL«.
• Teste die Block-Anzeige in der Views-Vorschau mit Kontextfiltern, in dem du die Beitrags-ID einer Veranstaltung eingibst und die Vorschau aktualisierst.

Eine Feed-Anzeige zur Ansicht hinzufügen

• Füge eine Anzeige vom Typ »Feed« zur Ansicht hinzu.
• Unter Format wähle »iCal Feed« und »iCal Fields«.
• Die Anzeige enthält zunächst die gleichen Felder wie der Views-Block.
• Ergänze unter »Felder« ein Textfeld für die Beschreibung der Veranstaltung, und stelle die Felder so ein, dass sie für den Feed übersteuert werden.
• Bearbeite die Einstellungen zu »iCal Fields« und wähle geeignete Felder für Datum, Titel, Beschreibung und Location des Kalendereintrags (siehe Bildschirmfoto).
  
• Gebe unter »Feed-Einstellungen« einen Pfad an, z.B. veranstaltung/%/export.ics. Das Prozentzeichen ist ein Platzhalter für die Beitrags-ID. In der Zeile unter dem Pfad sollte »Anhängen an: Keine« stehen (siehe Bildschirmfoto).
  
• Teste die Feed-Anzeige in der Views-Vorschau mit Kontextfiltern, in dem du die Beitrags-ID einer Veranstaltung eingibst und die Vorschau aktualisierst. Als Ergebnis müsstest du einen Kalender-Eintrag sehen, der ungefähr wie folgt aussieht:
  

  BEGIN:VCALENDAR
  VERSION:2.0
  PRODID:-//Backdrop Views Ical Export
  METHOD:PUBLISH
  X-WR-CALNAME;VALUE=TEXT:Veranstaltungen
  BEGIN:VEVENT
  UID:events.16.field_veranstaltung_datumzeit.0example.org
  DTSTAMP:20250521T160042Z
  SUMMARY:Betriebsversammlung
  DTSTART:20250604T140000Z
  DTEND:20250604T160000Z
  LOCATION:Online
  LAST-MODIFIED:20250521T153144Z
  CREATED:20250521T152611Z
  END:VEVENT
  END:VCALENDAR

Nachtrag: URL der Veranstaltung

Obwohl ich oben in den Einstellungen zu »iCal Fields« die Option »Attach entity url« gewählt hatte, erschien die URL der Veranstaltung nicht im Kalender-Eintrag. Die URL würde es Interessierten erlauben, vom Kalender zur Website zu gelangen, die in der Regel ausführlichere Infos bereitstellt. Um die URL im Kalender anzuzeigen, habe ich einen Workaround gewählt:

• Zunächst habe ich zu den Feldern der Feed-Anzeige den »Pfad« hinzugefügt. Dabei habe ich im Bereich »Ergebnisse überschreiben« die Option zur Ausgabe eines absoluten Links aktiviert.
• Anschließend habe ich in den Einstellungen der »iCal Fields« beim Beschreibungsfeld anstelle des Textfelds das Feld mit dem Pfad angegeben.

Die Block-Anzeige überarbeiten

Die zu Beginn erstellte Block-Anzeige benötigt noch eine wesentliche Komponente – den Kalender-Link:

• Wechsle zum Views-Block, und füge ein globales Feld vom Typ »Benutzerdefinierter Text« hinzu.
• Gebe folgenden HTML-Code für den Link in das Textfeld ein und passe ihn für deine Bedürfnisse an:
  <a class="button" href="/veranstaltung/[nid]/export.ics" download="termin-example-org-[nid].ics">Zum Kalender hinzufügen</a>
  Zur Erläuterung: Die CSS-Klasse zu Beginn sorgt dafür, dass der Link als Button dargestellt wird. Die Zeichenfolge [nid] ist ein Platzhalter für die Beitrags-ID. Das download-Attribut ermöglicht es, die ID auch im Dateinamen anzuzeigen.
• Alle anderen Felder der Block-Anzeige werden vorerst nicht mehr benötigt. Bearbeite die anderen Felder, und wähle jeweils die Option »Von der Anzeige ausschließen«.

Den Views-Block zu einem Layout hinzufügen

Um den Add-to-Calendar-Link auf der Detailseite aller Veranstaltungsbeiträge zu platzieren, plazierst du den Views-Block in einem Layout. Welches Layout für Veranstaltungen zuständig ist, hängt von der Konfiguration der Website ab. In einer frischen Installation ist es das Default-Layout.

• Gehe zur Detailseite eines beliebigen Veranstaltungsbeitrags, fahre im Admin-Menü über den Link »Diese Seite« und wähle das darunter angezeigte Layout. Du kommst zur Seite »Blöcke verwalten«.
• Suche die Überschrift der Content-Region, wähle den Link »Block hinzufügen«, suche den View mit den Veranstaltungen (siehe Bildschirmfoto), platziere den Block unterhalb des Haupt-Seiteninhalts, scrolle ganz nach unten, und speichere das Layout.
  

Als Ergebnis wird ein Link zum Download der ICS-Datei angezeigt, hier der Screenshot eines fiktiven Beispiels:

Wie der Kalender-Link sich beim Anklicken verhält, unterscheidet sich je nach Betriebssystem und Client. Auf meinem Rechner bietet Firefox mir an, den Link direkt mit dem Kalender-Client zu öffnen. Chrome dagegen lädt die Datei zunächst herunter und öffnet das Kalender-Programm erst nach Anklicken der heruntergeladenen Datei.

Fazit und Ausblick

Wider Erwarten ist eine Datenbankabfrage mit dem Views-Modul auch dann hilfreich, wenn Besucher:innen die Möglichkeit erhalten sollen, einzelne Termine einer Backdrop-Website zu ihrem eigenem Kalender hinzuzufügen. Die Konfiguration gelingt mit Hilfe des Zusatzmoduls Views iCal Export, das eigentlich für das Abonnieren von Kalender-Feeds gedacht ist.

Beschrieben wurde ein Add-to-Calendar-Link für die Detailseite von Veranstaltungsbeiträgen. Wie die nebenstende Abbildung zeigt, sind mit einer anderen Konfiguration auch Kalender-Links in Terminlisten möglich.

Auch wenn die hier vorgestellte Lösung ausgesprochen gut funktioniert, wäre es toll, wenn in Zukunft außerdem das Modul Add to Cal wiederbelebt würde. Mit solch einem spezialisierten Modul könnte die Einrichtung von Add-to-Calendar-Links wesentlich leichter erledigt werden. Dass sich irgendwann neue Maintainer:innen finden – zum Beispiel aus dem Kreis von Agenturen, die ihre Websites von Drupal auf Backdrop umstellen –, ist gar nicht so unwahrscheinlich. Bis dahin wünsche ich viel Erfolg mit der Konfiguration von Views und Views iCal Export.