Die Kalendereinträge aus einer oder mehreren WECHANGE-Gruppen und -Projekten könnt ihr mit wenigen Schritten und ohne technische Vorkenntnisse auf eure Website übertragen, wo sie sich automatisch synchronisieren, wenn ihr neue Veranstaltungen eintragt (und ehrlich gesagt ist die Darstellung des Kalenders dann auch anschaulicher als auf WECHANGE). Dabei kann euer Website-Kalender nicht nur Veranstaltungen aus WECHANGE anzeigen, sondern auch die aus anderen Kalendern. Und: Ihr könnt euren WECHANGE-Kalender genauso einfach mit eurem persönlichen Online-Kalender auf PC oder Smartphone abonnieren.
Letztes Mal ging es ums Einbetten der WECHANGE-Karte, dieses Mal erklären wir Schritt für Schritt, wie ihr eure Veranstaltungen übertragen könnt. Bei WordPress wird dies durch kostenlose Plugins ermöglicht, von denen zwei im Detail vorgestellt werden. Auch mit einem anderen Content Management System oder einem Website-Bauskasten könnt ihr dieselben Ergebnisse erzielen, wenn der Import eines iCal-Feeds unterstützt wird (was das ist, schauen wir uns gleich an). Wie das Ganze in der Praxis aussehen kann, könnt ihr euch erneut auf der Website von Lebendiges Lüneburg anschauen.
So kann’s aussehen: Dummy-Veranstaltungen aus einer WECHANGE-Gruppe und einem -Projekt, plus Einträge aus zwei externen Kalendern (eingefügt mit Hilfe des WP-Plugins “ICS Calendar”)
Interesse an Tipps und Austausch mit anderen WECHANGE-affinen Website-Gestalter*innen? Dann tritt unserem öffentlichen Rocket-Chat-Kanal #wechange-meets-wordpress bei!
Felix Englisch
Als Website-Gestalter der Initiative “Lebendiges Lüneburg”, die lokale Initiativen über WECHANGE vernetzt, hat Felix viel mit der Übertragung von Plattform-Inhalten herumexperimentiert. Seit Dezember 2020 ist er Vorstand der wechange Genossenschaft.
Hintergrundinfos: iCal – Das praktische Datenaustausch-Format
Der Austausch von Kalenderdaten, in diesem Fall von WECHANGE auf eure Website, wird durch den iCalendar-Standard ermöglicht, kurz iCal. Dadurch erfährt eure Website, was ihr auf WECHANGE eintragt und ändert. Wenn die Übertragung über eine entsprechende URL erfolgt (einen iCal-Feed), werden die Kalender miteinander synchronisiert (ggf. mit leichter Verzögerung und nur in eine Richtung). Möglich ist auch der Ex- und Import einer Datei mit Kalenderdaten, die dann die Dateiendung .ics oder .ical trägt.
Das Beste an der ganzen Sache ist, dass nicht nur der WECHANGE-Kalender, sondern die meisten Online-Kalender das iCal-Format unterstützen. Das heißt, dass auch andere Kalender den Import und Export bzw. die Synchronisation von Veranstaltungen erlauben.
Der iCal-Feed eures WECHANGE-Kalenders
Zuallererst braucht ihr die URL, die die Übertragung der Veranstaltungen aus eurer Gruppe oder eurem Projekt ermöglicht. Navigiert dafür zum entsprechenden Kalender und öffnet ihn als Vollbildansicht. Ganz unten rechts seht ihr nun einen Button:
Feed für Veranstaltungen
Wenn ihr da draufklickt, seht ihr einen Link. Kopiert euch diesen, wir brauchen ihn gleich. Ihr könnt die URL auch in die Browser-Zeile kopieren und laden. Dann werdet ihr gefragt, ob ihr eine iCal-Datei herunterladen möchtet. Da diese aber nur die aktuell eingetragenen Veranstaltungen enthält und sich nicht aktualisiert, brauchen wir die Datei gar nicht.
Beachtet dabei, dass der iCal-Feed auch nicht-öffentliche Veranstaltungen aus eurem Kalender enthält, also Einträge, die auf WECHANGE nur für Mitglieder oder auch nur für euch sichtbar sind. Auf eurer Website werden diese im Kalender uneingeschränkt angezeigt. Nur wenn Nutzer*innen auf die Veranstaltung klicken, springen sie nicht wie bei öffentlichen Veranstaltungen direkt zum WECHANGE-Eintrag, sondern sie werden zu eurer Microsite geleitet.
Außerdem zu beachten: Formatierungszeichen werden nach der Übertragung nicht richtig angezeigt. Wenn ihr im WECHANGE-Kalender z. B. schreibt: Fettes Wort, kursives Wort, Link, wird auf der Website daraus: **Fettes Word**, *kursives Wort*, [Link](https://beispiel.de) (also so, wie ihr es auch ursprünglich eingegeben habt).
Kostenlose WordPress-Plugins
Als Nächstes wollen wir den Kalender auf unsere Website holen. Dafür brauchen wir Erweiterungen, die den Import von iCal-Feeds ermöglichen. Für WordPress gibt es mehrere solcher Plugins, von denen wir uns zwei im Detail anschauen. Bei anderen Content Management Systems und Website-Baukästen gibt es sicherlich ähnliche Funktionen, die wir aber nicht getestet haben. Eine kurze Ecosia-Recherche nach “ical feed” und dem Namen eures CMS bzw. Baukastens sollte jedoch entsprechende Ergebnisse liefern – teile diese gerne in unserer #community!
ICS Calendar vs. All-In-One Event Calendar
Vergleichen wir zuerst die beiden Plugins, die wir für euch getestet haben und die wir uns gleich genauer anschauen. Beide könnt ihr wie gewohnt über das WordPress-Plugin-Verzeichnis installieren und aktivieren. Bitte beachten: Es geht hier jeweils um die kostenlose Version. Beide Plugins haben auch Premium-Versionen mit mehr Funktionen.
Im Grunde sind die Plugins ziemlich ähnlich – und die Kalender-Darstellung ist allemal besser als auf WECHANGE. Der wohl wichtigste Unterschied ist der, dass ihr mit dem ICS Calendar die Veranstaltungen aus mehreren Quellen (Gruppen, Projekten oder von ganz anderswo) importieren könnt. Wenn ihr das vorhabt, dürfte die Entscheidung einfach sein (aber Vorsicht, es gibt einen Fehler bei der mobilen Ansicht, der jedoch umgangen werden kann, siehe unten). Andererseits ist das Design (Farben, Schrifgröße, Abstände usw.) standardmäßig nicht immer geeignet und die Anpassung ist mit Hürden verbunden, da dafür CSS-Kenntnisse erforderlich sind (möglicherweise kann dir wer aus unserem Rocket-Chat-Kanal helfen). Wenn ihr also nur die Veranstaltungen aus einer Quelle importieren möchtet und der Kalender dafür schick aussehen soll, ist der All-In-One Event Calendar vermutlich die bessere Wahl.
| ICS Calendar | All-In-One Event Calendar | |
|---|---|---|
| Max. importierbare Feeds | Unbegrenzt | 1 (nur Veranstaltungen aus einer Gruppe/einem Projekt) |
| Einfügen | Als Shortcode | Als Shortcode |
| Konfiguration | Durch Parameter im Shortcode | In den Plugin-Einstellungen im WordPress-Dashboard, zusätzlich ggf. durch Parameter im Shortcode |
| Anpassung des Designs | Mit CSS | In den Plugin-Einstellungen oder mit CSS |
| Anstehende Events in der Seitenleiste | Ja, wenn gewollt | Ja, wenn gewollt |
| Automatische Erstellung einer Veranstaltungsseite für jeden Eintrag | Nein | Ja, jeweils eine eigene Unterseite auf eurer Website |
| Direktlinks zum WECHANGE-Eintrag | Ja | Schwer zu finden |
| Veranstaltungsbeschreibung beim Hovern anzeigen | Ja | Ja |
| Verschiedene Ansichten (Monat, Woche, Liste) | Ja | Ja, zusätzliche Tages-Ansicht |
| Für mobile Ansicht optimiert | Nicht so ganz, aber kann gelöst werden (s. u.) | Ja |
| Kategorien und Schlagworte | Nein | Ja, aber werden nicht aus WECHANGE übernommen, müssen manuell hinzugefügt werden |
| Filtern | Nach Kalendern, falls mehrere iCal-Feeds importiert werden | Nach Kategorien und Schlagworten |
| Manuelle Erstellung weiterer Veranstaltungen | Nein, nur iCal-Feeds | Ja, über das WordPress-Dashboard |
| Abonnier-Funktion | Nein (kann aber durch Bereitstellung der iCal-Feeds ermöglicht werden) | Ja, aber zum Teil fehlerhaft |
| Übertragung des Kalenders als Widget auf externe Websiten | Nein | Ja, wenn gewollt |
Hinweise zum ICS Calendar
Wenn ihr das Plugin installiert und aktiviert habt, findet ihr im Dashboard-Seitenmenü den Punkt “ICS Calendar”. Hier seht ihr lediglich einen Beispiel-Shortcode und die Weiterleitung zum vollständigen User Guide. Alle Shortcode-Parameter, mit denen ihr euren Kalender konfigurieren könnt, werden hier erklärt (sogar auch auf deutsch). Falls mal nicht klar ist, was gemeint ist: einfach ausprobieren!
Der oben angezeigte Kalener wird mit folgendem Shortcode erzeugt:
[ics_calendar
feedlabel="Beispiel-Initiative|Muster-Gruppe|Fürth im Übermorgen|FC St. Pauli Spielplan"
color="#1db2b2 #463758 #feec2e #e20613"
url="https://wechange.de/project/beispiel-initiative/event/feed/?user=4582&token=168731651272886455335726828300121089245 https://wechange.de/group/muster-gruppe/event/feed/?user=4582&token=168731651272886455335726828300121089245 https://fuerth-im-uebermorgen.de/kalender/?ical=1 https://www.google.com/calendar/ical/6lmacpjrrr96vi590djoo8nadk%40group.calendar.google.com/public/basic.ics"
columnlabels="short"
description="false"
eventdesc="true"
legendposition="above"
legendstyle="inline"
linktitles="true"
location="true"
monthnav="compact"
title="false"
view="month"]Wenn ihr das als Shortcode oder einfach als Text (eckige Klammern nicht vergessen) auf eurer Website eingebt, müsstet ihr abgesehen vom Design das gleiche Ergebnis erzielen. Bei der mobilen Ansicht verhält sich das jedoch anders.
Anpassung für die mobile Ansicht
Da ein Handy-Bildschirm zu schmal für die Monatsansicht ist, wird automatisch auf die Listenansicht umgestellt, was auch gut ist. Wenn ein Kalender, der standardmäßig in der Monatsansicht angezeigt wird, automatisch auf die Listenansicht umgestellt wird, funktionieren jedoch die Parameter count und eventdesc nicht. Diese sorgen – bei einem reinen Listenkalender – dafür, dass nicht alle anstehenden Veranstaltungen des aktuellen Monats angezeigt werden, sondern nur eine vorgegebene Anzahl (count) bzw. dass nicht die ganze Beschreibung angezeigt wird, sondern nur die ersten soundsoviel Zeichen, der Rest muss durch Tippen ausgeklappt werden (eventdesc).
Da diese (sehr hilfreichen) Parameter bei der Umstellung eines Monatskalenders nicht funktionieren, kann das dazu führen, dass er in der Listenansicht ewig lang wird (wenn es viele Veranstaltungen mit langen Beschreibungen gibt). Dies sollte man den Nutzer*innen nicht zumuten. Zum Glück schafft ein Trick Abhilfe. Und zwar könnt ihr zwei fast identische Kalender in eure Website einfügen, wobei der eine nur auf dem Desktop und der andere auf Smartphones (und Tablets) angezeigt wird. Der Desktop-Kalender ist dabei ein standardmäßiger Monatskalender (s. oben), beim Smartphone-Kalender setzt ihr hingegen view="list" eventdesc="10" count ="10" (die Zahlen sind nur Beispielwerte). Nun müsst ihr in eurem Pagebuilder oder mit einem @media query einstellen, dass der erste Kalender nur auf großen und der Zweite nur auf kleinen Bildschirmen angezeigt wird.
Lange Ladezeiten
Wenn ihr Veranstaltungen aus vielen verschiedenen Kalendern importiert, kann es sein, dass die Ladezeiten deutlich in die Länge gehen. Sollte dies problematische Ausmaße annehmen, müsst ihr vermutlich eine Abwägung treffen, ob ihr einzelne Kalender wieder entfernen wollt.
Kalender mit der PC- oder Smartphone-App abonnieren
Wenn ihr einen Online-Kalender nutzt (z. B. Outlook), könnt ihr mit diesem ebenfalls euren WECHANGE-Kalender abonnieren. Dafür braucht ihr lediglich den iCal-Feed, den wir uns am Anfang geholt haben. Je nachdem, welches Programm ihr nutzt, sind die Schritte zum Hinzufügen des Kalenders unterschiedlich. Wenn ihr im Internet einfach nach “ical feed importieren” und dem Namen eurer App sucht, solltet ihr fündig werden (falls es nicht selbsterklärend sein sollte).
Das war er, der zweite Artikel aus unserer neuen Rubrik WECHANGE meets WordPress. Hat euch die Anleitung gefallen und bringt euch die Plattform generell voran? Dann unterstützt unsere gemeinwohlorientierte Genossenschaft mit einem solidarischen Beitrag – wir und alle Nutzer*innen danken es dir!