Google-Kalender-Einbettungsgenerator

Betten Sie einen öffentlichen Google Kalender mit Ansicht, Zeitzone und Bedienelementen Ihrer Wahl in Ihre Website ein, kostenlos und ohne Anmeldung.
Google-Kalender-Einbettungsgenerator
Eine Kalender-ID, ein Freigabe- oder Einbettungslink oder eine iCal-Adresse, eine pro Zeile, z. B. team@example.com. Fügen Sie danach eine Farbe wie #039BE5 an.Sie möchten Veranstaltungen mit Fotos, Filtern und Ihrem Design?

Kalender einbetten

<div style="position:relative;width:100%;max-width:800px;aspect-ratio:4 / 3;">
  <iframe src="https://calendar.google.com/calendar/embed?src=en.usa%23holiday%40group.v.calendar.google.com&amp;showPrint=0&amp;showCalendars=0" title="Google Kalender" loading="lazy" style="position:absolute;inset:0;width:100%;height:100%;border:0;"></iframe>
</div>
<p style="margin:4px auto 0;text-align:center;font:11px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#a3a7b0;">Erstellt mit <a href="https://de.elfsight.com/tools/google-calendar-embed-generator/" target="_blank" rel="noopener" style="color:inherit;text-decoration:none;">Elfsight</a></p>

Tipp: Auf Telefonen ist die Terminübersicht besser lesbar als die Monatsansicht.

  1. Klicken Sie oben auf Code kopieren, um ihn zu kopieren.
  2. Öffnen Sie die HTML-Datei oder die Vorlage der Seite.
  3. Fügen Sie den Code innerhalb von <body> ein, dort wo der Inhalt erscheinen soll.
  4. Speichern und laden Sie die Seite hoch und öffnen Sie sie zur Kontrolle im Browser.

Sie möchten Veranstaltungen mit Fotos, Filtern und Ihrem Design? Probieren Sie das Event-Calendar-Widget. Event Calendar ansehen →

Bevor Sie gehen

Sie möchten Veranstaltungen mit Fotos, Filtern und Ihrem Design? Probieren Sie das Event-Calendar-Widget.

Event Calendar ansehen →
Oder teilen Sie dieses kostenlose Tool:
Event-Calendar-Widget

Bewerben Sie jede Veranstaltung in einem Kalender

Ihr Kalender wird zur zentralen Anlaufstelle, die jede Veranstaltung mehr Besuchern zeigt. Fügen Sie Orte, Gastgeber und Details in einem einfachen Editor hinzu und lassen Sie Besucher die passende Veranstaltung finden und teilnehmen.

  • Alle Ihre Veranstaltungen an einem Ort

  • Orte, Gastgeber und Veranstaltungsdetails

  • Fertige Vorlagen oder Ihr eigenes Design

Widget kostenlos erstellen
Keine Kreditkarte nötig
Mehr zu Event Calendar

Generator im Vergleich zum Code „Kalender integrieren“ von Google Kalender

Google Kalender hat in den Einstellungen jedes Kalenders einen eigenen Einbettungscode. Der Generator erstellt dieselbe Art von Code aus einem Link, sodass Sie die Einstellungen des Kalenders nicht öffnen müssen.
Code „Kalender integrieren“ von Google Kalender
Dieser Generator
Woher Sie den Code bekommen
Einstellungen → Ihr Kalender → Kalender integrieren, auf einem Computer
Hier, aus einem Link zum Kalender
Wovon Sie ausgehen
Die Einstellungsseite des Kalenders, bei Google angemeldet
Ein öffentlicher Kalenderlink, ein Einbettungslink oder die öffentliche iCal-Adresse
Mehrere Kalender
Der Code wird aus den Einstellungen eines Kalenders erstellt
Mehrere Kalender hinzufügen und jedem eine eigene Farbe geben
Anzeigeoptionen
Festgelegt im Bildschirm Anpassen
Dieselben Optionen als Schalter: Ansicht, Zeitzone, Wochenbeginn, Sprache, was angezeigt wird
Öffentlicher Zugriff
Nur Personen, für die Sie den Kalender freigegeben haben, sehen ihn, bis Sie ihn öffentlich machen
Dieselbe Regel: Der Kalender muss öffentlich sein, damit Besucher Termine sehen

Woher Sie den Code bekommen

Code „Kalender integrieren“ von Google Kalender

Einstellungen → Ihr Kalender → Kalender integrieren, auf einem Computer

Dieser Generator

Hier, aus einem Link zum Kalender

Wovon Sie ausgehen

Code „Kalender integrieren“ von Google Kalender

Die Einstellungsseite des Kalenders, bei Google angemeldet

Dieser Generator

Ein öffentlicher Kalenderlink, ein Einbettungslink oder die öffentliche iCal-Adresse

Mehrere Kalender

Code „Kalender integrieren“ von Google Kalender

Der Code wird aus den Einstellungen eines Kalenders erstellt

Dieser Generator

Mehrere Kalender hinzufügen und jedem eine eigene Farbe geben

Anzeigeoptionen

Code „Kalender integrieren“ von Google Kalender

Festgelegt im Bildschirm Anpassen

Dieser Generator

Dieselben Optionen als Schalter: Ansicht, Zeitzone, Wochenbeginn, Sprache, was angezeigt wird

Öffentlicher Zugriff

Code „Kalender integrieren“ von Google Kalender

Nur Personen, für die Sie den Kalender freigegeben haben, sehen ihn, bis Sie ihn öffentlich machen

Dieser Generator

Dieselbe Regel: Der Kalender muss öffentlich sein, damit Besucher Termine sehen

Einbettungsparameter

Die Einbettung ist eine Adresse, https://calendar.google.com/calendar/embed?…, mit diesen Parametern nach dem ?. Die Schalter zum Ein- und Ausblenden nehmen 1 oder 0; standardmäßig wird alles angezeigt.
Option
Was sie bewirkt
Werte
Hinweise
src
Der anzuzeigende Kalender
Kalender-ID, z. B. you@gmail.com oder …@group.calendar.google.com
Wiederholen Sie src, um mehrere Kalender zu kombinieren.
color
Terminfarbe des davor stehenden Kalenders
Hex mit codiertem #: %23D50000
Setzen Sie ein color direkt hinter jedes src. Ohne %23 wird die Farbe ignoriert.
ctz
Zeitzone, in der die Termine angezeigt werden
Name der Zeitzone, z. B. America/New_York
Ohne sie werden Termine in der Zeitzone des Kalenders angezeigt, nicht in der des Besuchers.
mode
Startansicht
MONTH (Standard), WEEK, AGENDA
AGENDA ist eine Liste anstehender Termine und lässt sich auf schmalen Bildschirmen am besten lesen.
showTitle, showNav, showDate
Kalendertitel, Buttons „Zurück“/„Weiter“ und „Heute“, aktueller Datumsbereich
1 oder 0
Ohne Navigationsbuttons können Besucher nur mit Tastenkürzeln durch die Daten navigieren.
showPrint, showTabs, showCalendars, showTz
Drucksymbol, Ansichtswechsler, Kalenderliste, Zeile „Termine werden in der Zeitzone angezeigt“
1 oder 0
Lassen Sie showTz eingeschaltet, wenn Ihre Besucher in anderen Zeitzonen sind.
wkst
Erster Tag der Woche
1 Sonntag, 2 Montag, 7 Samstag
—
hl
Sprache der Kalenderoberfläche
Sprachcode, z. B. en, de, es
Termintitel bleiben so, wie Sie sie geschrieben haben.
bgcolor
Hintergrundfarbe
Hex mit %23, z. B. %23FFFFFF
Hat im aktuellen Einbettungsdesign möglicherweise keine sichtbare Wirkung.

src

Was sie bewirkt

Der anzuzeigende Kalender

Werte

Kalender-ID, z. B. you@gmail.com oder …@group.calendar.google.com

Hinweise

Wiederholen Sie src, um mehrere Kalender zu kombinieren.

color

Was sie bewirkt

Terminfarbe des davor stehenden Kalenders

Werte

Hex mit codiertem #: %23D50000

Hinweise

Setzen Sie ein color direkt hinter jedes src. Ohne %23 wird die Farbe ignoriert.

ctz

Was sie bewirkt

Zeitzone, in der die Termine angezeigt werden

Werte

Name der Zeitzone, z. B. America/New_York

Hinweise

Ohne sie werden Termine in der Zeitzone des Kalenders angezeigt, nicht in der des Besuchers.

mode

Was sie bewirkt

Startansicht

Werte

MONTH (Standard), WEEK, AGENDA

Hinweise

AGENDA ist eine Liste anstehender Termine und lässt sich auf schmalen Bildschirmen am besten lesen.

showTitle, showNav, showDate

Was sie bewirkt

Kalendertitel, Buttons „Zurück“/„Weiter“ und „Heute“, aktueller Datumsbereich

Werte

1 oder 0

Hinweise

Ohne Navigationsbuttons können Besucher nur mit Tastenkürzeln durch die Daten navigieren.

showPrint, showTabs, showCalendars, showTz

Was sie bewirkt

Drucksymbol, Ansichtswechsler, Kalenderliste, Zeile „Termine werden in der Zeitzone angezeigt“

Werte

1 oder 0

Hinweise

Lassen Sie showTz eingeschaltet, wenn Ihre Besucher in anderen Zeitzonen sind.

wkst

Was sie bewirkt

Erster Tag der Woche

Werte

1 Sonntag, 2 Montag, 7 Samstag

Hinweise

—

hl

Was sie bewirkt

Sprache der Kalenderoberfläche

Werte

Sprachcode, z. B. en, de, es

Hinweise

Termintitel bleiben so, wie Sie sie geschrieben haben.

bgcolor

Was sie bewirkt

Hintergrundfarbe

Werte

Hex mit %23, z. B. %23FFFFFF

Hinweise

Hat im aktuellen Einbettungsdesign möglicherweise keine sichtbare Wirkung.

Google-Kalender-Hilfe: Google Kalender in Ihre Website einbetten ↗

Wenn der Kalender keine Termine anzeigt

Besucher sehen „Bei Ihrem Google-Konto anmelden“

Der Kalender ist nicht öffentlich. Machen Sie ihn in den Einstellungen von Google Kalender öffentlich (Schritte unten) und laden Sie Ihre Seite neu.

Der Kalender ist leer, aber in Google Kalender sehen Sie Termine

Prüfen Sie, ob Sie die richtige Kalender-ID eingebettet haben und ob der Kalender mit allen Termindetails freigegeben ist und nicht mit Nur Verfügbarkeit anzeigen (Details ausblenden).

Terminzeiten sind um einige Stunden verschoben

Die Einbettung zeigt die Zeitzone des Kalenders, nicht die des Besuchers. Setzen Sie ctz auf die Zeitzone, in der Ihre Termine stattfinden, und lassen Sie showTz eingeschaltet, damit Besucher sehen, in welcher Zeitzone die Zeiten angegeben sind.

Sie finden Öffentlich verfügbar machen nicht

Bei einem Arbeits- oder Schulkonto kann Ihr Administrator die Freigabe einschränken. Fragen Sie ihn oder verwenden Sie für den öffentlichen Kalender ein privates Google-Konto. Freigabeeinstellungen lassen sich nur auf einem Computer ändern.

Sie haben einen Link mit private- darin eingefügt

Das ist die geheime iCal-Adresse des Kalenders, die laut Google nicht weitergegeben werden soll. Verwenden Sie stattdessen die Öffentliche Adresse im iCal-Format oder die Kalender-ID.

Farben werden nicht übernommen

Schreiben Sie das # als %23 (color=%23D50000) und setzen Sie jedes color direkt hinter sein src.

Die Monatsansicht ist auf Telefonen zu eng

Wechseln Sie die Ansicht zu Terminübersicht (mode=AGENDA): Eine Liste anstehender Termine passt auf schmale Bildschirme.

Kalender öffentlich machen: Schritt für Schritt

Ein eingebetteter Kalender zeigt nur, was Google für alle sichtbar macht. Solange der Kalender nicht öffentlich ist, sehen Besucher statt Ihrer Termine eine Anmeldeaufforderung.

  • Öffnen Sie Google Kalender auf einem Computer. Freigabeeinstellungen lassen sich in der mobilen App nicht ändern.

  • Klicken Sie oben rechts auf das Zahnradsymbol und dann auf Einstellungen.

  • Klicken Sie links unter Einstellungen für meine Kalender auf den Kalender, den Sie einbetten möchten.

  • Aktivieren Sie unter Zugriffsberechtigungen für Termine die Option Öffentlich verfügbar machen und klicken Sie dann auf OK.

  • Wählen Sie, ob die Öffentlichkeit alle Termindetails oder Nur Verfügbarkeit anzeigen (Details ausblenden) sieht. Für einen Veranstaltungskalender zeigen Sie die Details.

  • Kopieren Sie auf derselben Seite unter Kalender integrieren die Kalender-ID oder die Öffentliche Adresse im iCal-Format und fügen Sie sie in den Generator ein.

Bevor Sie es tun: Ein öffentlicher Kalender kann von jedem gefunden werden und in Suchergebnissen erscheinen, und man kann ihn abonnieren. Halten Sie private Pläne in einem separaten Kalender und machen Sie nur den Veranstaltungskalender öffentlich. Neue Termine folgen der Standardsichtbarkeit des Kalenders, prüfen Sie sie daher einmal.

Bei einem Arbeits- oder Schulkonto kann die Option fehlen, wenn Ihr Administrator die Freigabe einschränkt. Wenn Sie die öffentliche Freigabe später ausschalten, kann es bis zu 4 Stunden dauern, bis sie wirksam wird.

So betten Sie einen Google Kalender ein

  1. Kalender öffentlich machen

    Aktivieren Sie in den Einstellungen von Google Kalender unter „Zugriffsberechtigungen“ die Option „Öffentlich verfügbar machen“.

  2. Kalender-ID kopieren

    Kopieren Sie unter „Kalender integrieren“ die Kalender-ID und fügen Sie sie hier ein.

  3. Ansicht wählen

    Wählen Sie Ansicht, Zeitzone und Bedienelemente und kopieren Sie dann den Code.

Häufig gestellte Fragen

Weitere Einbettungscode-Generatoren

YouTube-Einbettungscode-Generator

Fügen Sie einen beliebigen YouTube-Link ein und erhalten Sie in Sekunden einen responsiven Einbettungscode.YouTube-Einbettungscode-Generator

Video-Einbettungscode-Generator

Betten Sie ein Video ein, das überall liegen kann: MP4, Google Drive, Dropbox, Loom oder Wistia.Video-Einbettungscode-Generator

iFrame-Generator

Erstellen Sie einen responsiven iFrame für jede Seite, jedes Formular oder jede App.iFrame-Generator

PDF-Einbettungsgenerator

Zeigen Sie eine PDF-Speisekarte, Preisliste oder Broschüre direkt auf der Seite.PDF-Einbettungsgenerator