Zum Hauptinhalt gehen

Kalender in Webseite einbinden

  • Aktualisiert

Erfahre, welche Möglichkeiten es gibt, den Webling-Kalender in deine Webseite zu integrieren.

Webseiten mit WordPress

Wenn deine Website mit WordPress gemacht wurde, kannst du deinen Kalender ganz einfach mit dem Kalender-Plugin einbinden:  https://icscalendar.com/

Mit diesem Plugin kann man den Kalender über den öffentlichen ICS-Link auf seiner Webseite anzeigen.

Anleitung:

  1. Installiere das Plugin in deiner WordPress Installation: https://de-ch.wordpress.org/plugins/ics-calendar/
  2. Kopiere den ICS-Link des gewünschten Kalenders aus deinem Webling. Du findest die  Links für alle eingebetteten Kalender unter "Kalender" > "Kalender abonnieren".
  3. Verwende den Shortcode Generator, um dir einen Shortcode mit allen Optionen zu generieren: https://icscalendar.com/shortcode-builder/ 
    Füge dazu im Shortcode Generator den zuvor kopierten ICS-Link aus Webling ein.
  4. Füge den generierten Shortcode auf einer Seite in deinem WordPress ein.

Wenn du jetzt die Seite öffnest, dann könnte sie etwa so aussehen:

WordPress Plugin mit eingebundenem Webling Kalender

Andere Webseiten (Einbindung via iframe)

Wenn du HTML-Code auf deiner Website einbinden kannst, gibt es mit Google Kalender eine kostenlose Möglichkeit, eine Kalenderansicht auf deiner Webseite einzubinden.

Anleitung:

Kopiere den ICS-Link des gewünschten Kalenders aus deinem Webling. Du findest die Links zu allen eingerichteten Kalendern unter "Kalender" > "Kalender abonnieren". 

Logge dich mit deinem Google-Konto auf https://calendar.google.com ein

Klicke im linken Menü unter "Weitere Kalender" auf das Pluszeichen und wähle die Option "Per URL":

 

Nun kann der zuvor kopierte ICS-Link in das Feld "URL des Kalenders" eingefügt werden:

Aktiviere die Option "Den Kalender öffentlich machen" und klicke auf "Kalender hinzufügen"

Der hinzugefügte Kalender erscheint nun auf der Hauptansicht im linken Menü unter "Weitere Kalender". Klicke auf das Menü des neu hinzugefügten Kalenders und wähle die Option "Einstellungen":

In den Einstellungen gibt es einen Bereich "Kalender integrieren". Dort findest du den HTML-Code, den du kopieren kannst (Feld "Code einbetten"):

Diesen HTML-Code (iframe) kannst du nun in deine Webseite einfügen.

Über den Button "Anpassen" in Google kannst du eine erweiterte Darstellung des Kalenders erstellen. Zum Beispiel die Farben ändern, einzelne Optionen ein- oder ausblenden und zusätzliche Kalender anzeigen.

Der Kalender sieht dann ungefähr so aus:

Verwandte Beiträge