Outlook Kalender in WordPress einbinden (Office 365)

Wordpress Outlook Kalender

Nachdem ich die Anfrage bereits öfters erhalten habe, möchte ich in diesem Beitrag zeigen, wie einfach es ist einen Kalender aus Outlook (in der Variante Office/Microsoft 365) auf seiner eigenen WordPress Seite einzubinden.

Zu allererst benötigt man ein WordPress Plugin, welches den Kalender einfach auf einer WordPress Seite einbinden kann. Hier habe ich ICS Calendar von Room 34 Creative Services, LLC für mich entdeckt.

Hat man diese Plugin installiert, ist es notwendig den Link zur ics Datei des Outlook Kalender zu finden, den man auf der WordPress Seite einbinden möchte. Diesen findet man wie folgt:

Unter https://outlook.office.com/ loggt man sich in sein Outlook ein, in dem sich auch der zu veröffentliche Kalender befindet.

Einmal eingeloggt, findet man auf der rechten oberen Seite ein Zahnrad Symbol. Hier bitte drauf klicken

Es öffnet sich ein Menü in dem man ganz unten auf “alle Outlook Einstellungen anzeigen” klickt.

hier gehen wir auf “Kalender” und “Geteilte Kalender” -> wählen einen Kalender unter “Einen Kalender veröffentlichen” aus und bestimmen welche Berechtigung wir auf unserer Seite dann geben wollen. Mit Veröffentlichen, erhält man dann zwei Links. Wir benötigen nur den ICS Link. Einfach anklicken und “Link kopieren” auswählen.

Um das ganze zu vereinfachen, kopieren wir diesen Link in einen Editor und lassen diesen im Hintergrund einfach offen, wir benötigen ihn gleich wieder. Nun bringen wir das WordPress Plugin und den ICS Link zusammen.

In unserem Admin Bereich, auf unserer WordPress Seite, befindet sich nach der Installation des ICS Calendar ein neuer Menüpunkt, namens “ICS Calender”

Dies ist auch die derzeit einzige Information, die wir benötigen. Diesen Shortcode kopieren wir nun in den bereits geöffneten Editor, da dieser in dem Adminbereich nicht beschreibbar ist und wir nun einige Veränderungen vornehmen müssen.

Ist der Shortcode nun im Editor ersetzen wir nun den Platzhalter “Calendar_feed_url” mit unserem ICS Link, den wir vorher bereits hierher kopiert haben.

Statt des “Display_title” fügen wir einen Titel ein, der den Kalender am besten beschreibt und statt der “display-description” fügen wir einen Text ein, den wir unter dem Titel als mögliche Erläuterung eingeben möchten.

Bei mir sieht das nun so aus:

[ics_calendar url="https://outlook.office365.com/owa/calendar/xxxxxxxxxxxxxxxxxxxxxxxxxx@praschl-bichler.at/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/calendar.ics" title="Unsere öffentlichen Termine" description="Hier findet Ihr alle Termine von prabi365.at (Demo)"]

Nun erstelle ich eine neue Seite in meinem WordPress und füge diesen Shortcode als HTML Code auf dieser Seite ein. Ich habe meine Seite “Kalender” genannt und die Demo ist unter prabi365.at/kalender zu bewundern 🙂

Unter dem Menüpunkt des Plugins, findet man auch noch einige Codes, die Ansicht des Kalenders umzustellen, hier kann man die Ansicht (von Monat auf Woche oder Liste) umstellen oder weitere Informationen des Termins bei Mouse on over anzeigen lassen. Hierzu einfach die Anleitung des Plugins verwenden.

Ich wollte noch den Ort und Beschreibung (bei Mouse on over) des Termins anzeigen lassen. Somit musste ich noch die beiden Code Teile

eventdesc="true" location="true"

mit in den Short Code aufnehmen. Das sieht dann so aus:

[ics_calendar url="https://outlook.office365.com/owa/calendar/xxxxxxxxxxxxxxxxxxxxxxxxxx@praschl-bichler.at/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/calendar.ics" eventdesc="true" location="true" title="Unsere öffentlichen Termine" description="Hier findet Ihr alle Termine von prabi365.at (Demo)"]

Damit ist meine Kalendereinbindung erledigt gewesen. Hier geht es noch einmal zur Demo -> prabi365.at/kalender