So fuegen Sie einen In-Kalender-eintragen-Button zu Ihrer Website hinzu [Leitfaden 2026]
Sie haben eine Eventseite gebaut. Leute besuchen sie. Sie lesen die Details, sind vielleicht sogar begeistert. Dann gehen sie, vergessen es und erscheinen nie.
Die Loesung ist ein Button. Ein Button – "In Kalender eintragen" – der Ihr Event auf deren Smartphone bringt, in deren Tagesansicht, mit einer Erinnerung, die automatisch ausgeloest wird. Events mit einem Kalendereintrag-Button erzielen 20–40 % hoehere Teilnahme im Vergleich zu Events ohne.
Dieser Leitfaden deckt vier Wege ab, um einen In-Kalender-eintragen-Button zu Ihrer Website hinzuzufuegen, von rohem HTML ueber Drittanbieter-Widgets bis zu Eventseiten, die das fuer Sie uebernehmen. Code-Beispiele inklusive.
Warum In-Kalender-eintragen-Buttons unverzichtbar sind
Wenn Sie Events durchfuehren – Webinare, Meetups, Produkt-Launches, Office Hours – ist der In-Kalender-eintragen-Button das Element mit dem hoechsten ROI auf Ihrer Seite.
Hier, was die Daten zeigen:
| Kennzahl | Ohne Button | Mit Button |
|---|---|---|
| Event-Erinnerungsrate | ~30 % | ~85 % |
| No-Show-Rate | 40–60 % | 15–25 % |
| Wiederholte Teilnahme | Niedrig | 2–3x hoeher |
| Zeit bis zur Umsetzung | — | 5–30 Minuten |
Die Psychologie ist einfach: Ein Kalendereintrag verwandelt ein passives "Ich koennte kommen" in eine Verpflichtung. Das Event erscheint in deren Tagesansicht. Ihr Smartphone erinnert sie. Sie planen ihren Tag darum herum. Der Button ist die Bruecke zwischen Interesse und Teilnahme.
Lassen Sie ihn weg, und Sie verlassen sich darauf, dass sich die Leute erinnern – was sie nicht tun werden.
Methode 1: HTML + JavaScript (manueller Ansatz)
Der Do-it-yourself-Ansatz. Sie konstruieren Kalender-URLs fuer jeden Anbieter und praesentieren sie als Buttons. Volle Kontrolle, null Kosten, maximaler Aufwand.
Google Calendar-Button
Google Calendar akzeptiert Events via URL-Parameter. Hier ein funktionierendes Beispiel:
<a
href="https://calendar.google.com/calendar/render?action=TEMPLATE&text=Produkt+Launch+Webinar&dates=20260415T180000Z/20260415T193000Z&details=Nehmen+Sie+am+Q2+Produkt-Launch+teil.+Link:+https://example.com/join&location=https://zoom.us/j/123456"
target="_blank"
rel="noopener noreferrer"
class="calendar-btn"
>
Zu Google Calendar hinzufuegen
</a>
Outlook-Button
Outlook Web und Office 365 nutzen unterschiedliche Basis-URLs. Sie brauchen beide:
<!-- Outlook personal -->
<a
href="https://outlook.live.com/calendar/0/deeplink/compose?subject=Produkt+Launch+Webinar&startdt=2026-04-15T18:00:00Z&enddt=2026-04-15T19:30:00Z&body=Nehmen+Sie+am+Q2+Produkt-Launch+teil.&location=https://zoom.us/j/123456"
target="_blank"
rel="noopener noreferrer"
class="calendar-btn"
>
Zu Outlook hinzufuegen
</a>
<!-- Office 365 -->
<a
href="https://outlook.office.com/calendar/0/deeplink/compose?subject=Produkt+Launch+Webinar&startdt=2026-04-15T18:00:00Z&enddt=2026-04-15T19:30:00Z&body=Nehmen+Sie+am+Q2+Produkt-Launch+teil.&location=https://zoom.us/j/123456"
target="_blank"
rel="noopener noreferrer"
class="calendar-btn"
>
Zu Office 365 hinzufuegen
</a>
Yahoo Calendar-Button
<a
href="https://calendar.yahoo.com/?v=60&title=Produkt+Launch+Webinar&st=20260415T180000Z&et=20260415T193000Z&desc=Nehmen+Sie+am+Q2+Produkt-Launch+teil.&in_loc=https://zoom.us/j/123456"
target="_blank"
rel="noopener noreferrer"
class="calendar-btn"
>
Zu Yahoo Calendar hinzufuegen
</a>
Vollstaendige JavaScript-Implementierung
Hier eine wiederverwendbare Funktion, die alle vier Kalender-URLs aus einem einzelnen Event-Objekt erzeugt:
function generateCalendarLinks(event) {
const { title, start, end, description, location } = event;
// Datumsformat fuer Google/Yahoo: YYYYMMDDTHHmmSSZ
const formatGoogleDate = (date) =>
date.toISOString().replace(/[-:]/g, "").replace(/\.\d{3}/, "");
// Datumsformat fuer Outlook: ISO 8601
const formatOutlookDate = (date) => date.toISOString();
const googleStart = formatGoogleDate(start);
const googleEnd = formatGoogleDate(end);
const outlookStart = formatOutlookDate(start);
const outlookEnd = formatOutlookDate(end);
return {
google: `https://calendar.google.com/calendar/render?action=TEMPLATE&text=${encodeURIComponent(title)}&dates=${googleStart}/${googleEnd}&details=${encodeURIComponent(description)}&location=${encodeURIComponent(location)}`,
outlook: `https://outlook.live.com/calendar/0/deeplink/compose?subject=${encodeURIComponent(title)}&startdt=${outlookStart}&enddt=${outlookEnd}&body=${encodeURIComponent(description)}&location=${encodeURIComponent(location)}`,
office365: `https://outlook.office.com/calendar/0/deeplink/compose?subject=${encodeURIComponent(title)}&startdt=${outlookStart}&enddt=${outlookEnd}&body=${encodeURIComponent(description)}&location=${encodeURIComponent(location)}`,
yahoo: `https://calendar.yahoo.com/?v=60&title=${encodeURIComponent(title)}&st=${googleStart}&et=${googleEnd}&desc=${encodeURIComponent(description)}&in_loc=${encodeURIComponent(location)}`,
};
}
// Nutzung
const event = {
title: "Produkt Launch Webinar",
start: new Date("2026-04-15T18:00:00Z"),
end: new Date("2026-04-15T19:30:00Z"),
description: "Nehmen Sie am Q2 Produkt-Launch teil. Link: https://example.com/join",
location: "https://zoom.us/j/123456",
};
const links = generateCalendarLinks(event);
Die Buttons stylen
.calendar-btn {
display: inline-block;
padding: 10px 20px;
margin: 4px;
border-radius: 6px;
background: #1a73e8;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 14px;
}
.calendar-btn:hover {
background: #1557b0;
}
Das Problem mit diesem Ansatz
Es funktioniert, aber die Wartung ist schmerzhaft:
- Vier verschiedene URL-Formate. Jeder Kalender hat eigene Parameternamen, Datumsformate und Eigenheiten.
- Keine Apple Calendar-Unterstuetzung. Apple akzeptiert keine URL-basierte Event-Erstellung. Sie brauchen einen separaten ICS-Datei-Ansatz.
- Manuelle Zeitzonenkonvertierung. Alle URLs erfordern UTC. Wenn Ihr Event um 14 Uhr Eastern stattfindet, muessen Sie das selbst konvertieren.
- Kein Tracking. Sie haben null Sicht darauf, wie viele Leute den Button tatsaechlich geklickt haben.
- Fehleranfaellig. Ein Tippfehler in einem Datumsparameter, und das Event erscheint zur falschen Zeit – oder gar nicht.
Fuer ein einzelnes statisches Event ist dieser Ansatz akzeptabel. Fuer alles Wiederkehrende oder in grossem Massstab wird es zur Wartungslast.
Methode 2: ICS-Datei-Download
Das .ics-Datei-Format ist der universelle Kalenderstandard. Jede grosse Kalender-App – Google, Apple, Outlook, Yahoo – kann es importieren. Das ist ausserdem die einzige Moeglichkeit, Apple Calendar von einer Website aus zu unterstuetzen.
Die ICS-Datei erstellen
BEGIN:VCALENDAR
VERSION:2.0
PRODID:-//Your Company//Event//EN
CALSCALE:GREGORIAN
METHOD:PUBLISH
BEGIN:VEVENT
DTSTART:20260415T180000Z
DTEND:20260415T193000Z
SUMMARY:Produkt Launch Webinar
DESCRIPTION:Nehmen Sie am Q2 Produkt-Launch teil.\nLink: https://example.com/join
LOCATION:https://zoom.us/j/123456
STATUS:CONFIRMED
UID:product-launch-20260415@example.com
END:VEVENT
END:VCALENDAR
Von Ihrer Website ausliefern
Speichern Sie die Datei als event.ics auf Ihrem Server und verlinken Sie sie:
<a href="/events/event.ics" class="calendar-btn">
In Kalender eintragen (Apple, Outlook, Google)
</a>
Ihr Server muss den korrekten MIME-Typ zurueckgeben. In Apache:
AddType text/calendar .ics
In Nginx:
types {
text/calendar ics;
}
ICS-Dateien dynamisch erzeugen (Node.js)
function generateICS(event) {
const formatDate = (date) =>
date.toISOString().replace(/[-:]/g, "").replace(/\.\d{3}/, "");
return `BEGIN:VCALENDAR
VERSION:2.0
PRODID:-//YourApp//Events//EN
CALSCALE:GREGORIAN
METHOD:PUBLISH
BEGIN:VEVENT
DTSTART:${formatDate(event.start)}
DTEND:${formatDate(event.end)}
SUMMARY:${event.title}
DESCRIPTION:${event.description.replace(/\n/g, "\\n")}
LOCATION:${event.location}
STATUS:CONFIRMED
UID:${event.id}@yourdomain.com
END:VEVENT
END:VCALENDAR`;
}
// Express.js-Endpoint
app.get("/api/event/:id/calendar", (req, res) => {
const event = getEvent(req.params.id);
const ics = generateICS(event);
res.setHeader("Content-Type", "text/calendar");
res.setHeader("Content-Disposition", `attachment; filename="${event.title}.ics"`);
res.send(ics);
});
ICS-Einschraenkungen
- Der Download-Schritt fuegt Reibung hinzu. Nutzer bekommen eine Datei-Download-Aufforderung. Auf Mobilgeraeten kann das verwirrend sein.
- Einige E-Mail-Clients blockieren
.ics-Anhaenge aus Sicherheitsgruenden. - Kein Tracking. Sie wissen, dass jemand die Datei heruntergeladen hat, aber nicht, ob sie sie tatsaechlich importiert haben.
- Zeitzonenhandling ist kompliziert. Der
DTSTART-Wert muss exakt mit der Zeitzonen-Spezifikation uebereinstimmen, sonst erscheint das Event zur falschen Zeit.
Methode 3: Drittanbieter-In-Kalender-eintragen-Widgets
Wenn Sie die Kalenderlogik nicht selbst bauen wollen, uebernehmen Widget-Services das fuer Sie. Sie betten ein Skript-Tag oder Button-Snippet ein, und es erzeugt die Kalender-Buttons.
AddEvent
Das etablierteste In-Kalender-eintragen-Tool. Sie betten ein JavaScript-Widget auf Ihrer Seite ein, und es zeigt ein Dropdown mit Kalenderoptionen.
<!-- AddEvent Embed-Beispiel -->
<div class="addeventatc">
In Kalender eintragen
<span class="start">04/15/2026 02:00 PM</span>
<span class="end">04/15/2026 03:30 PM</span>
<span class="timezone">America/New_York</span>
<span class="title">Produkt Launch Webinar</span>
<span class="description">Nehmen Sie am Q2 Produkt-Launch teil.</span>
<span class="location">https://zoom.us/j/123456</span>
</div>
<script src="https://addevent.com/libs/atc/1.6.1/atc.min.js"></script>
Preisrealitaet: Der kostenlose Tarif gibt Ihnen 100 Kalendereintraege/Monat und 20 Abonnenten. Relevante Funktionen starten bei $36/Monat (Small-Business-Plan). Fuer einen Kalender-Button auf Ihrer eigenen Website.
CalGet
Eine einfachere Alternative. Button erstellen, Snippet bekommen, einbetten.
Preisrealitaet: Kostenlos fuer bis zu 50 Kalendereintraege pro Event und 25 Abonnenten pro Kalender. Danach starten bezahlte Plaene bei $16/Monat. Wenn Ihr Event 200 Angemeldete hat, haben Sie den kostenlosen Tarif bereits vierfach ueberschritten.
Das Widget-Problem
Beide Tools funktionieren. Aber beide haben dasselbe grundlegende Problem: Sie zahlen ein Abonnement fuer das, was im Wesentlichen einige Links und ein Dropdown-Menue sind.
| Widget | Kostenlos-Limit | Bezahlter Startpreis | Was Sie bekommen |
|---|---|---|---|
| AddEvent | 100 Eintraege/Monat, 20 Abonnenten | $36/Monat | Einbindbarer Button + Dropdown |
| CalGet | 50 Eintraege/Event, 25 Abos/Kalender | $16/Monat | Einfacher Button + gehostete Seiten |
Fuer ein Unternehmen, das woechentlich Events durchfuehrt, kostet AddEvent $432/Jahr. Fuer einen Button. CalGets Pay-per-Use-Modell bestraft Wachstum – je erfolgreicher Ihr Event, desto mehr zahlen Sie.
Methode 4: Eventseite mit integriertem Kalendereintrag (Calen)
Es gibt einen anderen Ansatz, der das Widget-Modell komplett umgeht. Anstatt Buttons auf Ihrer bestehenden Seite einzubetten, erstellen Sie eine dedizierte Eventseite mit eingebautem Kalendereintrag.
Calen verfolgt diesen Ansatz. Sie erstellen ein Event (Titel, Datum, Beschreibung, Bild) und erhalten eine teilbare Eventseite mit Ein-Klick-In-Kalender-eintragen-Buttons fuer Google, Apple, Outlook, Yahoo und Office 365.
So funktioniert's
- Erstellen Sie Ihr Event auf Calen (dauert etwa 3 Minuten)
- Erhalten Sie eine teilbare URL:
https://calen.events/your-event-slug - Teilnehmer besuchen die Seite, klicken "In Kalender eintragen", waehlen ihren Kalender – fertig
- Verlinken Sie die Eventseite von Ihrer Website, E-Mails, Social-Posts
Was Sie nicht bauen muessen
- Kalender-URL-Konstruktion fuer jeden Anbieter
- ICS-Datei-Generierung und Hosting
- Zeitzonenkonvertierungs-Logik
- Mobile-responsive Kalender-Button-UI
- Tracking und Analytics
Preise
Unbegrenzte Events. Unbegrenzte Kalendereintraege. Kostenlos.
Der kostenlose Tarif enthaelt bis zu 100 E-Mail-Abonnenten (Personen, die Ihnen fuer kuenftige Events folgen). Wenn Sie mehr Abonnenten brauchen, kostet der Pro-Plan $9,99/Monat. Aber die Kernfunktionalitaet – Eventseiten und Kalendereintraege – hat keine Obergrenze.
Das ist der Hauptunterschied zu AddEvent und CalGet: Es gibt kein Limit fuer Kalendereintraege. Ihr Event koennte 10 Kalendereintraege bekommen oder 10.000 – die Kosten sind dieselben.
Auf Ihrer Website einbetten
Sie koennen direkt auf Ihre Calen-Eventseite verlinken oder sie als Link/Button auf Ihrer bestehenden Seite einbetten:
<a
href="https://calen.events/your-event-slug"
target="_blank"
rel="noopener noreferrer"
class="calendar-btn"
>
Event ansehen und in Kalender eintragen
</a>
Keine JavaScript-Snippets zu pflegen. Keine Drittanbieter-Skripte, die auf Ihrer Seite geladen werden. Keine Widget-Styling-Konflikte mit Ihrem CSS.
Vergleich: Alle vier Methoden
| Funktion | HTML + JS | ICS-Datei | Widget (AddEvent) | Eventseite (Calen) |
|---|---|---|---|---|
| Google Calendar | Ja | Ja | Ja | Ja |
| Apple Calendar | Nein | Ja | Ja | Ja |
| Outlook | Ja (2 URLs) | Ja | Ja | Ja |
| Yahoo | Ja | Ja | Ja | Ja |
| Zeitzonenhandling | Manuell | Manuell | Automatisch | Automatisch |
| Tracking | Keines | Keines | Ja | Ja |
| Mobile UX | Selbst bauen | Datei-Download | Dropdown | Native Buttons |
| Einrichtungszeit | 1–2 Stunden | 30–60 Min | 15 Min | 3 Min |
| Wartung | Hoch | Mittel | Gering | Keine |
| Kosten | Kostenlos | Kostenlos | $36/Monat+ | Kostenlos |
| Kalendereintrags-Limit | Keines | Keines | Abhaengig vom Plan | Keines |
| OGP-Social-Card | Selbst bauen | Nein | Nein | Automatisch generiert |
| Abonnentensystem | Nein | Nein | Nein | Ja |
| Code auf Ihrer Seite | Ja | Ja | Ja (Skript-Tag) | Nein (nur ein Link) |
Wann jede Methode nutzen
Nutzen Sie HTML + JavaScript, wenn: Sie Entwickler sind, volle Kontrolle wollen, ein oder zwei statische Events haben und keine Apple Calendar-Unterstuetzung oder Tracking brauchen.
Nutzen Sie ICS-Dateien, wenn: Sie universelle Kalenderunterstuetzung einschliesslich Apple brauchen, Sie komfortabel Datei-Generierung verwalten und Ihr Publikum technisch genug ist, um einen Datei-Download zu bewaeltigen.
Nutzen Sie ein Widget (AddEvent), wenn: Sie ein Unternehmen mit Budget sind, Sie den Button direkt auf Ihrer Seite mit Ihrem Branding eingebettet brauchen und eine Managed-Loesung wollen.
Nutzen Sie eine Eventseite (Calen), wenn: Sie den schnellsten Weg von "Ich habe ein Event" zu "Menschen tragen es in ihren Kalender ein" wollen. Kein Code, keine Wartung, keine Gebuehren pro Eintrag.
Best Practices fuer In-Kalender-eintragen-Buttons
Unabhaengig von der Methode, folgen Sie diesen Regeln:
1. Platzieren Sie den Button above the fold
Der Kalender-Button sollte der prominenteste Call-to-Action auf Ihrer Eventseite oder Bestaetigungsbildschirm sein. Nicht am Ende. Nicht in einer Seitenleiste. Zentral.
2. Direkten Buttontext verwenden
Gut: "In Kalender eintragen"
Gut: "In Google Calendar speichern"
Gut: "Zu meinem Kalender hinzufuegen"
Schlecht: "Hier klicken"
Schlecht: "RSVP"
Schlecht: "Event merken"
"In Kalender eintragen" ist die Standardformulierung, die Nutzer erkennen. Werden Sie damit nicht kreativ.
3. Mehrere Kalender unterstuetzen
Nehmen Sie nicht an, dass alle Google Calendar nutzen. Der Markt ist geteilt:
| Kalender | Ungefaehrer Marktanteil |
|---|---|
| Google Calendar | ~45 % |
| Apple Calendar | ~25 % |
| Outlook / Office 365 | ~25 % |
| Yahoo Calendar | ~3 % |
| Andere | ~2 % |
Wenn Sie nur einen Google Calendar-Button anbieten, schliessen Sie mehr als die Haelfte Ihres Publikums von einem Ein-Klick-Erlebnis aus.
4. Den Beitritts-Link im Kalendereintrag einschliessen
Das ist das am haeufigsten uebersehene Detail. Der Kalendereintrag sollte alles enthalten, was jemand zur Teilnahme braucht – besonders die Meeting-URL. Wenn die Erinnerung 15 Minuten vorher auf dem Smartphone ausgeloest wird, sollte der Beitritts-Link direkt dort sein. Kein Suchen in E-Mails.
5. Den Button auch in Ihre Bestaetigungs-E-Mail packen
Nicht jeder fuegt das Event sofort zum Kalender hinzu. Fuegen Sie den In-Kalender-eintragen-Button hinzu in:
- Die Anmelde-Bestaetigungsseite
- Die Bestaetigungs-E-Mail
- Die Erinnerungs-E-Mail 24 Stunden vorher
Drei Beruehrungspunkte. Jeder erreicht Personen, die der vorherige verpasst hat.
6. Auf Mobilgeraeten testen
Ueber 60 % des Eventseitenverkehrs ist mobil. Testen Sie Ihre Kalender-Buttons auf tatsaechlichen Smartphones. Das ICS-Datei-Download-Erlebnis auf Mobilgeraeten ist besonders rau – ein nativer Button (wie Calen ihn bietet) ist deutlich fluessiger.
7. Schema.org-Event-Markup hinzufuegen
Wenn Ihre Eventseite auf Ihrer eigenen Domain liegt, fuegen Sie strukturierte Daten hinzu, damit Suchmaschinen sie verstehen:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Event",
"name": "Produkt Launch Webinar",
"startDate": "2026-04-15T18:00:00Z",
"endDate": "2026-04-15T19:30:00Z",
"eventAttendanceMode": "https://schema.org/OnlineEventAttendanceMode",
"eventStatus": "https://schema.org/EventScheduled",
"location": {
"@type": "VirtualLocation",
"url": "https://zoom.us/j/123456"
},
"description": "Nehmen Sie am Q2 Produkt-Launch teil."
}
</script>
Calen-Eventseiten enthalten dieses Markup automatisch.
Schnellstart: Bringen Sie einen Button in 3 Minuten live
Wenn Sie heute einen In-Kalender-eintragen-Button ohne Code zum Laufen bringen wollen:
- Nutzen Sie den kostenlosen Kalenderlink-Generator, um In-Kalender-eintragen-Links fuer Google, Apple, Outlook und Yahoo in einem Schritt zu erstellen
- Fuegen Sie die Links als Buttons in Ihre Website ein
- Fertig
Wenn Sie eine vollstaendige Eventseite mit Kalendereintraegen, Social Cards, Abonnentenverwaltung und Analytics wollen, erstellen Sie ein Event auf Calen und teilen den Link. Drei Minuten, kein Code, keine Limits fuer Kalendereintraege.
Hoeren Sie auf, Teilnehmer zwischen "interessiert" und "erschienen" zu verlieren. Ein einzelner Button veraendert die Rechnung.
Verwandte Artikel:
- So erstellen Sie einen In-Kalender-eintragen-Link (Leitfaden 2026)
- 7 bewaehrte Wege, um No-Shows bei Events zu reduzieren
- Die 7 besten kostenlosen Eventseiten-Builder – im Vergleich
- Webinar-Kalendereinladungen: So bekommen Sie 2x mehr Teilnehmer
- 15 Wege, um die Teilnahmequote bei Events zu steigern
- 20 kostenlose Methoden zur Event-Promotion
- So teilen Sie Google Calendar Events