Wie binde ich Google Kalender in meine Website ein?

Es gibt verschiedene Situationen in denen man den Google Kalender in seine Website einbinden möchte. Es kann sein, dass du aktuelle Termine oder Events anzeigen willst, die Belegung einer Ferienwohnung darstellen möchtest und noch vieles mehr. 

Der Google Kalender lässt sich zum einen per HTML-Code (iFrame-Code) oder per App bzw. Plugin einbetten. Diese Möglichkeiten bieten sowohl Website Baukasten, als auch WordPress. 

Das generelle Vorgehen zum Einbinden von Google Kalender in eine Website ist wie folgt:

1. Google Kalender auf einem Computer öffnen
2. Auf das Zahnradsymbol klicken und Einstellungen wählen
3. Auf der linken Seite den Namen des Kalenders auswählen der eingebettet werden soll
4. Den Kalender können Sie unterhalb von Code einbetten bei Anpassen nach ihren Bedürfnissen anpassen
5. Kopieren Sie unter Code einbetten den dargestellten iFrame-Code
6. Damit der Kalender für alle Besucher ihrer Website sichtbar ist, müssen sie ihn öffentlich machen.
7. Den kopierten iFrame-Code bei ihrer Website einfügen

Der siebte Punkt ist momentan natürlich etwas zu einfach beschrieben. Bei diesem Punkt gehen wir weiter auf die Details ein. Es ist abhängig davon ob du deine Website mit einem Website Baukasten oder mit WordPress erstellt hast.

Im folgenden werde ich dir zeigen wie du den Google Kalender mit dem Website Baukasten von Jimdo, Hostpoint und Wix verbinden kannst. Zusätzlich zeige ich dir noch die Möglichkeiten mit WordPress.

Google Kalender mit Website Baukasten von Jimdo verbinden

Nachdem du die Schritte 1 bis 6 gemacht hast, bist du nun bereit den Google Kalender in Jimdo einzubetten. Wähle dazu im Jimdo Website-Editor die Seite aus, bei der der Kalender eingefügt werden soll. Erstelle ein neues Element und wähle Widget/HTML aus. Es kann sein, dass du weitere Inhalte und Add-ons aufklappen musst. Anstatt Widget/HTML kannst du auch das Element Kalender auswählen. Das Endresultat ist dasselbe.

Beim neu gewählten Element musst du nun den kopierten HTML-Code (Punkt 5) einfügen und speichern. Der Kalender wird dir nun angezeigt.

Bei Jimdo kannst du das Design nicht direkt im Website-Editor bearbeiten. Dazu musst du dich in dein Google Konto einloggen und den Kalender dort bearbeiten. Dies kannst du wie im Punkt 5 beschrieben machen, also unter Code einbetten auf Anpassen klicken.

Dort kannst du die Farbe, Rahmenlinien, Titel, Zeitzone und alle weiteren Einstellungen vornehmen. 

Wichtig!

Wenn du das Design verändert hast, musst du unbedingt den iFrame-Code nochmals kopieren und neu bei Jimdo einfügen. Machst du das nicht, wird immer noch das alte Design dargestellt.

Was jedoch funktioniert ist, wenn neue Termine oder Events hinzugefügt werden, wird das automatisch auf deiner Website aktualisiert. Hierfür musst du nicht jedes mal den iFrame-Code neu einfügen, denn dafür ist genau dieser Code zuständig.

Link zum Website Baukasten von Jimdo

Google Kalender mit Website Baukasten von Hostpoint verbinden

Gleich wie bei Jimdo musst du die Schritte 1 bis 6 zuerst erledigen, bevor du den Kalender bei Hostpoint einfügen kannst. Wähle danach beim Website-Editor die Seite aus, bei der der Kalender eingefügt werden soll. Wähle unter Inhaltselemente das Element Google Kalender aus und ziehe es an den gewünschten Ort auf der Seite.

Es geht dabei ein neues Fenster auf, bei dem du das Google Konto verbinden musst. Trage die Kalender-ID ein. Im Normalfall ist dies deine Mailadresse. Bist du dir nicht sicher, kannst du die ID beim Abschnitt Kalender freigeben deines Google Kalenders nachschauen. In diesem Fenster kannst du noch die Standardansicht und wann der Wochenbeginn ist, wählen.

Weitere Einstellungen kannst du mit dieser Methode nicht mehr vornehmen. Wenn du aber das Design anpassen möchtest, gibt es eine andere Möglichkeit.

Wähle dazu bei den Inhaltselementen das Element Embed aus und ziehe es an den gewünschten Ort auf deiner Seite. Öffne die Konfiguration und füge den kopierten iFrame-Code bei Embed-Code ein. Den iFrame-Code findest du beim Google Kalender unter Code einbetten (siehe Punkt 5).

Im Website-Editor hat sich dadurch nichts verändert. Wenn du nun aber die Seite in der Vorschau betrachtest, kannst du den Kalender sehen.

Möchtest du nun das Design noch anpassen musst du dich in dein Google Konto einloggen und dort den Kalender bearbeiten. Dies kannst du wie im Punkt 5 beschrieben machen, also unter Code einbetten auf Anpassen klicken.

Wichtig!

Wenn du das Design verändert hast, musst du unbedingt den iFrame-Code nochmals kopieren und neu beim Editor von Hostpoint einfügen. Machst du das nicht, wird immer noch das alte Design dargestellt.

Was jedoch funktioniert, wenn neue Termine oder Events hinzugefügt werden, wird das automatisch auf deiner Website aktualisiert. Hierfür musst du nicht jedes mal den iFrame-Code neu einfügen, denn dafür ist genau dieser Code zuständig.

Link zum Website Baukasten von Hostpoint

Google Kalender mit Website Baukasten von Wix verbinden

Das generelle Vorgehen, das ich am Anfang beschrieben habe, kannst du mit Wix weglassen. Denn Wix macht es uns sehr einfach.

Im Wix Website-Editor kann man den Google Kalender mit einer App verbinden. Damit der Kalender bereits auf der richtigen Seite hinzugefügt wird, solltest du zuerst auf diese im Website-Editor gehen. Danach gehst du unter Apps hinzufügen auf die Suche und suchst nach Kalender. Dabei solltest du den Google Event Calendar finden. Mit dem Klick auf hinzufügen, wird er installiert und du gelangst wieder zurück zum Website-Editor.

In den Einstellungen des Google Kalenders musst du als erstes unter Info dein Konto verbinden. Solltest du kein Google Konto haben, kannst du dort gleich ein neues erstellen. Nachdem du das Konto ausgewählt hast, musst du Wix noch die Freigabe erteilen, dass der Kalender auch angezeigt und bearbeitet werden kann. 

Nachdem dein Konto nun verbunden ist, kannst du das Layout nach deinen Vorstellungen anpassen. Mit den Layouts Monatlich, Wöchentlich und Terminübersicht hast du diverse Möglichkeiten.

Bei den Einstellungen kannst du das Zeitformat, die Zeitzone und die Sprache wählen.

Bei Design kannst du die Schriftarten und Farben nach deinen Wünschen einstellen.

Link zum Website Baukasten von Wix

Google Kalender mit WordPress verbinden

Mit WordPress hast du wie fast meistens, die Qual der Wahl. Grundsätzlich kannst du den Google Kalender mit einem Plugin einfügen oder direkt mit dem iFrame-Code auf einer Seite hinzufügen. Beides hat seine Vor- und Nachteile.

Kalender Plugin

Mit den Plugins hast du die Möglichkeit die Daten von deinem Google Kalender an das Plugin zu senden und dort individuell darzustellen.

Es gibt eine Reihe von Plugins mit denen das möglich ist. Zum Beispiel Simple Calendar oder Modern Events Calendar. Bei beiden kann der Google Kalender synchronisiert werden, damit immer die aktuellen Termine und Events dargestellt werden. Dazu brauchst du einen API-Key. Wie du zu diesem kommst, ist in diesem Beitrag von Chip.de gut beschrieben.

Sobald die Synchronisierung mit dem Google Kalender funktioniert, kannst du bei beiden Plugins den Kalender so darstellen wie du ihn möchtest. Mit Modern Events Calendar hast dabei mehr Möglichkeiten als mit Simple Calendar.

Direkt in WordPress-Seite einbetten

Bei WordPress hast du ebenfalls die Möglichkeit, den Google Kalender direkt mit dem iFrame-Code einzubetten. Dies kannst du direkt auf einer Seite oder auch einem Blogeintrag machen. Dazu gehst du in den Bearbeitungsmodus auf der Seite bei der der Kalender eingefügt werden soll. Dort fügst du einer neuen Box den HTML Code hinzu.

Wenn du so wie ich den Pagebuilder Elementor installiert hast, kannst du die Seite mit Elementor bearbeiten und das Widget HTML hinzufügen.

Den HTML Code findest du bei deinem Google Konto im Kalender unter Einstellungen, wie unter Punkt 5 beschrieben. Das Design kannst du ebenfalls direkt dort anpassen. Wenn du Design-Anpassungen machst, musst du den HTML-Code neu kopieren und einfügen.

Zusammenfassung

Es gibt grundsätzlich zwei Varianten wie du deinen Google Kalender in deine Website integrieren kannst.

• Direkt mit dem HTML-Code (iFrame-Code)
• Mit einer App, oder Plugin

Als erstes musst du dafür deinen Google Kalender vorbereiten. Das heisst du musst ihn öffentlich machen, damit für die Besucher deiner Website der Kalender überhaupt sichtbar ist. 

Als zweites kannst du den Kalender dann verbinden oder einbetten. Je nach Website Baukasten (oder auch mit WordPress) sind die Möglichkeiten verschieden. Mir persönlich gefällt die Integration mit Wix sehr gut. Die Handhabung ist sehr einfach, aber man hat trotzdem viele Designmöglichkeiten. 

Wenn du noch etwas unerfahren mit dem Erstellen von Websites bist, kann die Integration des Kalenders mit einem WordPress-Plugin etwas verwirrend sein. Bist du jedoch schon etwas erfahrener, hast du mit WordPress (und dem Plugin  Modern Events Calendar) keine Einschränkungen. Damit kannst du alles erdenkliche umsetzen.