Manchmal möchte man nicht alles doppelt und dreifach pflegen. Sie haben einen öffentlichen Kalender bei Google oder bei Apple oder bei Microsoft Office oder – sehr löblich – in Ihrer eigenen NextCloud und möchten Ihn nun auf Ihrer Website darstellen?
Kein Problem. Mit wenigen Handgriffen ist es erledigt. Und wenn nicht, fragen Sie uns einfach…
Der Schlüssel zum Glück heißt “ICS”.
Was ist “ICS”, Was ist ein “ICS”-Kalender?
ICS steht für “iCalendar Specification” oder auch “Internet Calendaring and Scheduling Core Object Specification”. Es handelt sich dabei um ein standardisiertes Dateiformat für Kalenderdaten, das 1998 entwickelt wurde und in RFC 5545 spezifiziert ist. Die wichtigsten Merkmale von ICS sind:
- Es ist ein offenes, plattformunabhängiges Format zum Austausch von Kalenderinformationen.
- ICS-Dateien haben üblicherweise die Dateiendung .ics oder .ical.
- Sie enthalten Informationen zu Kalenderereignissen wie Titel, Beschreibung, Datum, Uhrzeit, Ort etc.
- Die Informationen können in einem einfachen Texteditor geöffnet und angepasst werden.
- Es wird von den gängigen Kalenderanwendungen unterstützt, darunter Proton Calendar, NextClouds CalDAV-Server, Google Calendar, Apple Calendar, Microsoft Outlook und viele mehr.
- ICS ermöglicht den einfachen Austausch von Terminen und Ereignissen zwischen verschiedenen Kalendersystemen und Geräten. In unserem Fall zwischen Ihrem Kalender und Ihrer Website.
Das wichtige für uns an diesem Forma ist die Austauschfähigkeit. Sie können Termine als ICS-Datei exportieren und an andere senden, die diese dann in ihren eigenen Kalender importieren können.
Welchen Nutzen hat es, seinen Kalender auf der Website einzubinden?
Wenn Sie einen Kalender auf Ihre Website einbinden, müssen Sie die Termine oder Blockzeiten nur an einer Stelle, nämlich in Ihrem elektronischen Kalender pflegen. Das ist durch die komfortable Software der Kalender-Software wesentlich schneller und komfortabler als sich auf einer Website einzuloggen und ein Kalender Formular zu bedienen. Was liegt also näher, den Komfort der Anwendung und die Reichweite Ihrer Website miteinander zu kombinieren!
Wie man seinen ICS-Feed bei den verschiedenen Systemen findet:
Nextcloud
- Kalender öffnen: Melden Sie sich bei Ihrer Nextcloud-Instanz an und öffnen Sie die Kalender-App.
- Kalender auswählen: Klicken Sie auf die drei Punkte neben dem Kalender, den Sie exportieren möchten.
- Privaten Link kopieren: Wählen Sie “Privaten Link kopieren” aus. Dieser Link kann dann als ICS-Feed verwendet werden.
Google Kalender
- Am Google Konto anmelden.
- Mit dem Desktop-Browser: Auf dem “Apps” Symbol (rechts oben) auf “Kalender”.
- Kalender auswählen: Klicken Sie auf das Einstellungen-Symbol (Das Zahnrädchen) und wählen Sie “Einstellungen”.
- Kalender öffentlich machen: Wählen Sie den Kalender aus, den Sie freigeben möchten, und aktivieren Sie die Option “Öffentlich freigeben“.
- iCal-Link kopieren: Scrollen Sie nach unten und kopieren Sie den Link im Feld “Öffentliche Adresse im iCal-Format”.
- Mehr dazu hier: https://support.google.com/calendar/answer/37118?co=GENIE.Platform%3DDesktop&hl=de
Der Link sieht ungefähr so aus:
https://calendar.google.com/calendar/ical/<lange-zahlen-und-buchstabenreihe>group.calendar.google.com/public/basic.ics
Apple Kalender
- Kalender öffnen: Öffnen Sie die Kalender-App auf Ihrem Mac.
- Kalender auswählen: Klicken Sie mit der rechten Maustaste auf den Kalender, den Sie freigeben möchten, und wählen Sie “Kalender freigeben”.
- Öffentlich machen: Aktivieren Sie die Option “Öffentlich freigeben”. Wenn Sie dann noch einmal auf den Kalender mit Rechtsklick (Desktop, Mac OS) klicken, erscheint der Feed. Alternativ haben Sie die Option “Copy URL to Clipboard” bzw. “URL in Zwischenablage kopieren”.
- Link kopieren: Kopieren Sie den angezeigten Link, der als ICS-Feed dient.
Der Link sieht ungefähr so aus:
webcal://p148-caldav.icloud.com/published/<lange-zahlen-und-buchstabenreihe>
Microsoft Outlook
- Outlook öffnen: Öffnen Sie Outlook und gehen Sie zu Ihrem Kalender.
- Kalender freigeben: Klicken Sie auf “Kalender freigeben” und wählen Sie “Kalender veröffentlichen”.
- ICS-Link generieren: Wählen Sie die gewünschten Freigabeeinstellungen und kopieren Sie den generierten ICS-Link[13][14].
Der Link sieht ungefähr so aus:
https://outlook.office365.com/owa/calendar/<lange-zahlen-und-buchstabenreihe>/calendar.ics
Einbinden und Darstellung Ihres Kalenders in WordPress
Den ICS Link in den Tiefen der Einstellungen großen Anbieter zu finden, ist eigentlich schon die meiste Arbeit. Wenn Sie WordPress benutzen, wird es jetzt wirklich einfach. (Und falls Sie schon immer mal neidisch auf die ganzen WordPress User geschaut haben und sich fragen, ob es nicht Zeit ist, ihre Seite auf WordPress umzustellen, dann fragen Sie uns gern, wir haben das schon oft Migrationen durchgeführt).
Wir empfehlen für die Integration das PlugIn “ICS Calendar” (https://icscalendar.com). In der kostenlosen Version bekommen Sie bereits einen einfachen Kalender, den Sie mit etwas CSS-Kenntnissen grafisch aufpolieren können. In der nicht teuren PRO-Version erhalten Sie zusätzlich die Möglichkeit, Ihren Kalender über einen komfortable Oberfläche zu gestalten und zu konfigurieren.
Es gibt auch Alternativen, die wir unten aufgeführt haben. ICS Calender konzentriert sich allerdings ganz auf die Einbindung von ICS Kalendern und wir lieben PlugIns der Form “Do one thing and do it right”.
So gehen Sie vor:
- Plugin installieren: Installieren und aktivieren Sie das Plugin ICS Calendar auf Ihrer WordPress-Seite.
- Kalender anzeigen: Verwenden Sie den Shortcode des Plugins, um den Kalender auf einer Seite oder in einem Beitrag anzuzeigen.
Das war es schon. Den Rest erledigt das PlugIn.
Und so könnte es dann aussehen (Beispiel eines Kundenprojektes, ICS Calendar in der PRO-Version):
