Nutze Buttons, RSVP-Formulare und Event-Listen mit deinem Tech Stack

Unsere Add to Calendar Buttons und RSVP-Formulare lassen sich ganz einfach mit praktisch jedem Tech Stack integrieren.
Die Einrichtung mit den Standardeinstellungen ist innerhalb von 1 Minute erledigt. Details kannst du anschließend nach Belieben anpassen.

Wie du starten solltest

Wir empfehlen, im Menü nach deinem Tech Stack zu suchen und von dort aus zu beginnen.
Lies den Rest dieser Seite für ausführlichere Details und Optionen zur Anpassung.

Bestehende v2-Integration aktualisieren?

Die V3 Migrationsanleitung erklärt das Update deines Skripts oder npm-Pakets und das Laden von Styles und Sprachen.

Allgemeiner Workflow

Es sind nur 2 Schritte notwendig, um RSVP-Formulare und Add to Calendar Buttons in deiner Anwendung oder auf deiner Webseite anzuzeigen.

1. Lade das Skript (durch Importieren des Pakets, Laden des Skripts über CDN oder über ein Plugin).
2. Platziere ein <add-to-calendar-button>-Tag dort, wo du das Element anzeigen möchtest, und füge den prokey als Attribut hinzu.

<add-to-calendar-button prokey="prokey-deines-events"></add-to-calendar-button>

Wir generieren automatisch einen prokey für jedes von dir erstellte Event. Du kannst ihn ganz oben auf der jeweiligen Eventseite finden.

Wenn du ein Event über unsere API erstellst, erhältst du den prokey als Response.

Browser-Initialisierung und SSR

Das Hauptpaket registriert die interaktive Web Component im Browser. Bei Nuxt kannst du dafür ein Client-Plugin verwenden; bei Next.js eine Client-Komponente. Version 3 bietet zusätzlich einen separaten SSR-Einstieg zum Vorab-Rendern einer Button-Hülle. Siehe SSR mit PRO.

Verwendung via CDN

Lade das Skript, indem du den folgenden Script-Tag zum Head-Bereich deiner Webseite hinzufügst. Das Skript wird auf nicht blockierende Weise geladen.

<script src="https://cdn.jsdelivr.net/npm/add-to-calendar-button" async defer></script>

Styles und Sprachen werden bei Bedarf automatisch vom CDN nachgeladen. Nutze das Hauptskript; frühere Unstyled-Builds sind in v3 nur noch Kompatibilitätslösungen.

Verwendung via npm

Installiere das Paket mit dem folgenden npm-Befehl:

npm install add-to-calendar-button

Importiere das Modul in deinem Projekt/Komponente:

import 'add-to-calendar-button/styles/all';
import 'add-to-calendar-button/i18n/de';
import 'add-to-calendar-button';

Das Paket enthält standardmäßig nur den Standard-Style und Englisch. Wähle Styles und Sprachen unabhängig voneinander. Bei einem festen Style importiere add-to-calendar-button/styles/3d; nutze add-to-calendar-button/styles/all, wenn die remote verwaltete PRO-Konfiguration den Style ohne Deployment ändern kann. Importiere standardmäßig eine konkrete Sprache oder kleine bekannte Menge, etwa add-to-calendar-button/i18n/de. Nutze add-to-calendar-button/i18n/all nur, wenn Sprachen zur Laufzeit wirklich unvorhersehbar wechseln können. Das Beispiel kombiniert styles/all mit i18n/de, was gültig ist. Importiere jedes benötigte Style- und Sprachmodul vor add-to-calendar-button; lade das Hauptmodul zuletzt, damit es das Custom Element erst aktiviert, nachdem die Dateien registriert sind. Beide Aggregate-Imports vergrößern das Bundle, weil sie alle jeweiligen Dateien enthalten.

Alternativ lädt style-source="jsdelivr" Styles und Sprachen bei Bedarf, passend zur installierten Paketversion. Eigene Trigger verwenden styleSource: 'jsdelivr' in atcb_action. Die V3 Migrationsanleitung erklärt Selbst-Hosting und weitere Strategien. Frühere /unstyle- und /no-pro-Imports sollten durch den Haupteinstieg ersetzt werden.

Je nach Framework/Library musst du möglicherweise kleinere Anpassungen an der jeweiligen Konfiguration vornehmen.

Verwendung über ein Plugin

Für einige Systeme (wie WordPress) bieten wir offizielle Plugins an.

Normalerweise findest du diese in den entsprechenden Stores. Überprüfe allerdings unbedingt die jeweilige Seite in dieser Dokumentation für Details und um keine falschen (oder gar schädlichen) Inhalte zu installieren.

SSR mit PRO

Der separate Einstieg add-to-calendar-button/ssr kann eine Button-Hülle vorab rendern. Für über einen prokey verwaltete Daten nutze atcb_generate_ssr_html_async auf dem Server. Die Funktion lädt die PRO-Konfiguration, bevor sie das HTML erzeugt:

import { atcb_generate_ssr_html_async } from 'add-to-calendar-button/ssr';

const html = await atcb_generate_ssr_html_async({
  prokey: 'prokey-deines-events',
});

Übergib ausschließlich das von dieser Funktion erzeugte HTML an die HTML-Ausgabe deines Frameworks. In v3.3.0 behält die servergerenderte Hülle ihre passenden Styles, bis der Client sie aktiviert. Lade im Browser zuerst alle benötigten Style- und Sprachmodule und anschließend das Hauptpaket zuletzt, um die Hülle zu aktivieren. Die SSR-Hülle ersetzt nicht die Initialisierung der vollständigen Interaktion und RSVP-Formulare im Browser. Plane auch die Fehlerbehandlung für das Laden der PRO-Konfiguration ein.

Die offiziellen Anleitungen für Next.js, Astro, Nuxt und Svelte zeigen die framework-spezifische HTML-Ausgabe und Browser-Aktivierung. Ersetze dort die synchrone Erzeugung mit lokalen Event-Daten durch den asynchronen PRO-Aufruf oben in deinem serverseitigen Datenfluss. In Nuxt muss die vorhandene SSR-Hülle beim Hydrieren erhalten bleiben; nutze dafür die dort gezeigte Direktive statt v-html.

Wichtige Überlegungen

Es gibt 2 Dinge, die vor der Implementierung zu beachten, bzw. deinerseits zu prüfen sind.

1. Paket/Plugin vs. CDN

Ob du das Skript als Teil deines Kernsystems verwalten möchtest - über deine üblichen Paket-/Plugin-Flows; oder ob du es lieber über einen Script-Tag von einem externen CDN laden möchtest.

Es gibt Vor- und Nachteile für beide Ansätze und es liegt ganz bei dir, was du bevorzugst. Im Zweifelsfall geht es um Bequemlichkeit und darum, was du gewohnt bist. Bedenke, dass die Verwendung als Modul von dir verlangt, es manuell aktuell zu halten!

2. User Flow

Ob du Links und Dateien über das Skript auf der Client-Seite generieren lassen oder ob du unseren Proxy-Service verwenden möchtest.

Im ersten Fall werden die Links zu den Kalendern direkt im Browser dynamisch generiert. Auch die ics-Datei wird auf diese Weise dynamisch erstellt. Dies ist der schnellste Ansatz (aus Sicht des Benutzers). Allerdings wird die ics-Generierung bei einigen Systemen blockiert und falls ein Kalenderanbieter offline geht oder interne Probleme hat, kann der Benutzer kein Event speichern.
Bei Verwendung des Proxys werden Links und Dateien auf unserer Seite generiert und der Benutzer wird zuerst zu uns umgeleitet. Sollte etwas nicht funktionieren, können wir den Benutzer damit auch darüber informieren und Alternativen sowie Anleitungen anbieten. Dies ist daher der stabilere Weg, für den Benutzer aber etwas langsamer.

Du kannst die Proxy-Einstellung über einen Style verwalten, den du mit dem Event (oder Event-Gruppe) verbindest. Wenn kein Style definiert ist, verwendet wir standardmäßig die Proxy-Option.

Event-Listen

Die Event-Listen-Funktion rendert die öffentlichen Events einer Add to Calendar PRO Gruppe über die <add-to-calendar-button> Web Component.

Anstatt einen Button darzustellen, lädt die Komponente die Event-Daten der Gruppe und baut daraus direkt auf deiner Webseite eine navigierbare Liste auf.

Schnellstart

Wenn du zunächst eine Liste online bringen möchtest, folge der Schritt-für-Schritt-Anleitung Eine Event-Liste auf deiner Webseite erstellen.

Voraussetzungen

Die Funktion benötigt folgende Voraussetzungen:

• Eine gültige Add to Calendar PRO Gruppe.
• Den Prokey dieser Gruppe.
• Die aktivierte Einstellung Public Event Overview in den Gruppeneinstellungen.
• Eine aktuelle Version des Add to Calendar Button Pakets, die die Event-Liste unterstützt.
• Client-seitiges JavaScript. Die Event-Daten werden im Browser geladen und gerendert.

Die Komponente kann nicht prüfen, ob ein Prokey zu einer Gruppe gehört. Du bist dafür verantwortlich, den richtigen Gruppen-Prokey anzugeben.

Basiskonfiguration

Gib den Gruppen-Prokey an. Mehr ist nicht erforderlich:

<add-to-calendar-button
  prokey="DEIN-GRUPPEN-PROKEY"
></add-to-calendar-button>

Wenn Public Event Overview für die Gruppe aktiv ist, erkennt die Komponente das automatisch und rendert die Event-Liste anstelle eines normalen Add to Calendar Buttons.

Es gibt eine Ausnahme: Wenn die Gruppe gleichzeitig als Kalender-Abonnement konfiguriert ist, rendert die Komponente standardmäßig den Abonnement-Button. Setze in diesem Fall explizit das Boolean-Attribut group-overview, um stattdessen die Liste darzustellen:

<add-to-calendar-button
  prokey="DEIN-GRUPPEN-PROKEY"
  group-overview
></add-to-calendar-button>

group-overview funktioniert nur zusammen mit einem gültigen prokey. Du kannst das Attribut bei jeder Gruppe mit aktiver öffentlicher Event-Übersicht gefahrlos setzen. Notwendig ist es nur im Abonnement-Fall.

Wenn die Übersicht einer Abonnement-Gruppe angefordert wird, erscheint oben bei den Datumsfiltern ein Add to Calendar Button für das Abonnement. Die Event-Einträge darunter sind rein informativ: Es gibt keine Landingpage-Links, individuellen Kalenderaktionen oder RSVP-Modals. Das hat Vorrang vor no-details und add-via-list.

Um den Abonnement-Button auszublenden und die normalen Listen-Interaktionen wiederherzustellen, setze die Übersichtsoption No subscribe button (no-subscribe-button) auf true:

<add-to-calendar-button
  prokey="DEIN-GRUPPEN-PROKEY"
  group-overview
  group-overview-config='{"no-subscribe-button":true}'
></add-to-calendar-button>

Ein ausdrücklich gesetztes no-add:true bleibt dabei wirksam.

Zusätzliche Einstellungen gehören in das Objekt group-overview-config:

<add-to-calendar-button
  prokey="DEIN-GRUPPEN-PROKEY"
  group-overview-config='{
    "type":"list",
    "years-only":false,
    "no-details":false,
    "no-add":false,
    "add-via-list":true
  }'
></add-to-calendar-button>

Objekt-Attribute in HTML müssen valides JSON enthalten. Eine praktische Schreibweise verwendet einfache Anführungszeichen um das Attribut und doppelte Anführungszeichen innerhalb des JSON. Verwende keine Kommentare oder nachgestellten Kommas.

Laden der Daten

Die Komponente lädt die öffentlichen Events über die Add to Calendar PRO Events API. Intern verwendet sie:

GET https://api.add-to-calendar-pro.com/v1/event/all
    ?group=DEIN-GRUPPEN-PROKEY
    &dates=true
    &from=...
    &to=...

Du musst diesen Endpunkt nicht selbst aufrufen und stellst keinen API-Token bereit. Der Gruppen-Prokey dient als öffentliche Kennung.

Der Parameter from wird immer übertragen. to wird nur ergänzt, wenn du ihn konfigurierst.

Im Entwicklungsmodus verwendet die Komponente die Entwicklungs-API, den Entwicklungs-Endpunkt für Event-Konfigurationen und Landingpage-Links über dev.caldn.net.

Datumsorganisation

Standardzeitraum

Die standardmäßige Untergrenze ist der 1. Januar des vorherigen Kalenderjahres um 00:00:00Z.

Im Jahr 2027 wäre der Standard beispielsweise:

2026-01-01T00:00:00Z

Events aus Jahren vor dem vorherigen Jahr werden nicht gerendert.

Für die API-Abfrage und nicht wiederkehrende Termine gibt es standardmäßig keine Obergrenze. Für Wiederholungen gilt das unten beschriebene separate Zeitfenster.

Jahresauswahl

Das aktuelle Jahr ist zunächst ausgewählt und steht in der Jahresauswahl immer zur Verfügung.

Andere Jahre erscheinen nur, wenn ihnen mindestens ein Event zugeordnet ist. Ein Jahr ohne Events wird ausgeblendet. Das aktuelle Jahr bildet die Ausnahme: Wenn es keine Events enthält, zeigt die Komponente den lokalisierten Hinweis „Keine Veranstaltungen in diesem Jahr.“ an.

Die language-Einstellung der Komponente steuert den leeren Hinweis, die Monatsnamen und die formatierten Datumsangaben.

Monatsauswahl

Im Standardmodus zeigt eine zweite Auswahl die verfügbaren Monate des ausgewählten Jahres. Monate ohne Events werden nicht angeboten.

Der aktuelle Monat wird ausgewählt, wenn er Events enthält. Andernfalls wird der erste verfügbare Monat ausgewählt.

Start- und Enddaten

Ein Event erscheint im Monat und Jahr seines Startdatums.

Wenn ein nicht wiederkehrendes Event in einem Jahr beginnt und in einem späteren Jahr endet, erscheint es zusätzlich im Januar des Endjahres. Es wird nicht in jedem Monat zwischen Start- und Enddatum wiederholt.

Bei Events mit mehreren Terminen wird jedes vom Gruppen-Endpunkt zurückgegebene Datum zu einem eigenen Listeneintrag.

Wiederkehrende Events

Wiederkehrende Events werden unterstützt. Jedes Vorkommen erscheint in seinem jeweiligen Monat und Jahr, vom ersten Tag des aktuellen Monats bis einschließlich zum letzten Tag des Monats in 18 Monaten. Das Zeitfenster beginnt also nicht erst heute: Frühere Vorkommen im aktuellen Monat werden ebenfalls angezeigt. Vorkommen außerhalb dieses Zeitfensters werden ausgelassen.

Die Optionen from und to filtern die API-Abfrage; sie erweitern dieses feste Wiederholungsfenster nicht. Die Wiederholungsregel einschließlich Enddatum oder Anzahl der Vorkommen gilt weiterhin. Jeder dargestellte Termin verweist bei Landingpage, Kalenderaktion oder RSVP auf das ursprüngliche wiederkehrende Event, statt ein eigenes Event anzulegen. Jahresübergreifende wiederkehrende Termine werden nicht zusätzlich im Januar ihres Endjahres angezeigt.

Konfigurationsreferenz

group-overview-config kann keine, einige oder alle der folgenden Eigenschaften enthalten.

Eigenschaft	Typ	Standard	Beschreibung
no-subscribe-button	Boolean	false	Blendet bei Abonnement-Gruppen den oberen Abonnement-Button aus und stellt die normalen Listen-Interaktionen wieder her. Ohne diese Option sind die Einträge unabhängig von no-details und add-via-list rein informativ. Ein ausdrücklich gesetztes no-add:true deaktiviert die Interaktionen weiterhin.

Eigenschaft	Typ	Standard	Beschreibung
years-only	Boolean	false	Entfernt die Monatsauswahl und rendert alle Events des ausgewählten Jahres. Monatsnamen werden zu Überschriften zwischen den Event-Gruppen.
type	String	list	Wählt das visuelle Layout. Erlaubte Werte sind list, cards und compact. Ungültige Werte fallen auf list zurück.
from	String	1. Januar des vorherigen Jahres	UTC-ISO-Zeitstempel, der die API-Abfrage am unteren Ende begrenzt. Werte vor der standardmäßigen Untergrenze werden auf den Standardwert angehoben.
to	String	Keine Obergrenze	UTC-ISO-Zeitstempel, der die API-Abfrage am oberen Ende begrenzt. Er darf nicht vor dem effektiven from-Wert liegen.
no-details	Boolean	false	Verhindert die Navigation zur Event-Landingpage. Stattdessen öffnet der gesamte Event-Eintrag die Kalenderoptionen oder das RSVP-Modal.
no-add	Boolean	false	Deaktiviert jegliche Interaktion. Einträge werden als rein statischer Inhalt ohne Landingpage-Links, Add-to-Calendar-Aktionen und RSVP-Modals dargestellt. Übersteuert no-details und add-via-list.
custom-domain	String	caldn.net	Hostname für Landingpage-Links, beispielsweise events.example.com. Gib kein Protokoll und keinen Pfad an. Die Domain muss bereits in Add to Calendar PRO konfiguriert sein.
add-via-list	Boolean	false	Ergänzt bei regulären Events einen direkten Auslöser für die Kalenderoptionen. Die genaue Darstellung hängt von type, no-details und der Verwendung von RSVP ab.

UTC-Datetime-Format

from und to müssen UTC-ISO-Zeitstempel ohne Millisekunden verwenden:

2027-01-01T00:00:00Z

Die folgenden Werte sind für diese Einstellungen nicht gültig:

2027-01-01
2027-01-01T00:00:00+01:00
2027-01-01T00:00:00.000Z

Wenn to ungültig ist oder vor dem effektiven from liegt, kann die Übersicht nicht initialisiert werden.

Layout-Typen

list

Das Listen-Layout rendert ein Event pro Zeile und ist auf eine Breite von 600 px begrenzt.

Jeder Eintrag enthält:

• Den Starttag in einem dunklen Block auf der linken Seite.
• Den auf zwei Zeilen begrenzten Titel.
• Datum und Uhrzeit sowie den Ort in getrennten Zeilen.
• Die auf einfache Leerzeichen normalisierte und auf zwei Zeilen begrenzte Beschreibung.

Die gesamte Karte ist der Event-Link oder Aktionsauslöser.

cards

Das Karten-Layout rendert gleich breite Karten und orientiert sich an der Container-Breite der Komponente, nicht an der Breite des Browserfensters.

• Unter 600 px: eine Spalte.
• Ab 600 px: zwei Spalten.
• Ab 1000 px: drei Spalten.
• Maximale Komponentenbreite: 1200 px.

Jede Karte zeigt Datum und Uhrzeit über dem Titel, gefolgt von Ort und Beschreibung. Der Titel wird auf zwei Zeilen und die Beschreibung auf drei Zeilen begrenzt.

Unvollständige Reihen behalten dieselbe Spaltenbreite wie vollständige Reihen.

compact

Das kompakte Layout rendert eine minimale Textliste nach diesem Grundmuster:

Datum | Event-Titel

Der vollständige Text ist verlinkt. Wenn direkte Add-to-Calendar-Aktionen aktiv sind, ersetzt die Plus-Marke bei regulären Events den Listenpunkt. RSVP-Einträge verwenden stattdessen einen ausgerichteten Punkt.

Interaktionsverhalten

Übersichten von Abonnement-Gruppen zeigen standardmäßig einen Abonnement-Button und rein informative Einträge. Die folgenden Regeln gelten für Gruppen ohne Abonnement oder nach dem Setzen von no-subscribe-button:true bei einer Abonnement-Gruppe.

Die Interaktion hängt von no-add, no-details, add-via-list, dem ausgewählten Layout und der Verwendung von RSVP ab.

Wenn no-add aktiv ist, steht keinerlei Interaktion zur Verfügung. Einträge werden als statischer Inhalt dargestellt: kein Landingpage-Link, keine Kalenderoptionen und kein RSVP-Modal. no-details und add-via-list haben in diesem Modus keine Wirkung.

Wenn no-add deaktiviert ist (der Standard), gelten die folgenden Kombinationen:

no-details	add-via-list	Reguläres Event	RSVP-Event
false	false	Der gesamte Eintrag öffnet die Landingpage.	Der gesamte Eintrag öffnet die Landingpage mit dem RSVP-Ablauf.
false	true	Der gesamte Eintrag öffnet die Landingpage. Eine separate Plus-Marke öffnet das Modal mit den Kalenderoptionen.	Der gesamte Eintrag öffnet die Landingpage. Es wird keine Plus-Marke angezeigt.
true	false	Der gesamte Eintrag öffnet das Modal mit den Kalenderoptionen.	Der gesamte Eintrag öffnet das RSVP-Formular in einem Modal.
true	true	Bei list und cards ist die Marke ein visueller Teil desselben Aktionslinks; ein Klick an beliebiger Stelle öffnet das Modal. Bei compact wird keine Marke angezeigt.	Der gesamte Eintrag öffnet das RSVP-Formular in einem Modal. Es wird keine Plus-Marke angezeigt.

RSVP-Events

RSVP-Events erhalten bewusst keine unabhängige Plus-Aktion. Eine personalisierte Kalenderdatei kann von der RSVP-Antwort abhängen und gehört deshalb zum RSVP-Ablauf.

Mit den Standardeinstellungen öffnet das Event daher seine Landingpage. Wenn no-details aktiv ist, wird das RSVP-Formular in einem Modal geöffnet, selbst wenn der Event-Stil normalerweise eine Inline-Darstellung des RSVP-Formulars anfordert.

Landingpages und eigene Domains

Ohne custom-domain verwenden Event-Links folgendes Schema:

https://caldn.net/EVENT-PROKEY

Mit einer konfigurierten eigenen Domain:

group-overview-config='{"custom-domain":"events.example.com"}'

wird der ursprüngliche Link wie folgt aufgebaut:

https://events.example.com/EVENT-PROKEY

Der Wert verändert den im Quellcode erzeugten Link. Add to Calendar PRO leitet gegebenenfalls ohnehin auf eine konfigurierte eigene Domain weiter. Die Einstellung verhindert jedoch, dass technisch versierte Personen diese Weiterleitung beim Untersuchen der Seite sehen.

Die eigene Domain muss in Add to Calendar PRO aktiv sein. Die Web Component konfiguriert oder validiert die externe Domain-Einrichtung nicht.

Sprache und individuelle Beschriftungen

Verwende das reguläre language-Attribut, um Monatsnamen, Datumsangaben und den Hinweis für ein leeres aktuelles Jahr zu lokalisieren:

<add-to-calendar-button
  prokey="DEIN-GRUPPEN-PROKEY"
  language="de"
></add-to-calendar-button>

Der leere Hinweis kann außerdem über customLabels mit dem Schlüssel group_overview.empty überschrieben werden.

Styling

Die Event-Liste verwendet einen einfachen Schwarz-Weiß-Basisstil. Sie verändert sich nicht mit der regulären buttonStyle-Einstellung des Add to Calendar Buttons.

Die Komponente verwendet Shadow DOM. Nutze CSS-::part()-Selektoren, um freigegebene Elemente zu gestalten:

add-to-calendar-button::part(atcb-group-overview-year-select) {
  border-color: rebeccapurple;
}

add-to-calendar-button::part(atcb-group-overview-title) {
  color: rebeccapurple;
}

add-to-calendar-button::part(atcb-group-overview-event) {
  border-radius: 0;
}

Folgende Parts stehen zur Verfügung:

Der Container des Abonnement-Buttons stellt außerdem atcb-group-overview-subscribe bereit, wenn er vorhanden ist.

Part	Element
atcb-group-overview	Wurzelelement der Übersicht
atcb-group-overview-controls	Container der Auswahlfelder
atcb-group-overview-year-select	Jahresauswahl
atcb-group-overview-month-select	Monatsauswahl
atcb-group-overview-results	Container der gerenderten Ergebnisse
atcb-group-overview-empty	Hinweis für ein leeres aktuelles Jahr
atcb-group-overview-month-heading	Monatsüberschrift im years-only-Modus
atcb-group-overview-list	Container der Event-Liste
atcb-group-overview-event	Einzelner Event-Eintrag
atcb-group-overview-link	Hauptlink oder Aktionslink des Events
atcb-group-overview-day	Tagesblock im list-Layout
atcb-group-overview-day-value	Numerischer Tageswert
atcb-group-overview-title	Event-Titel
atcb-group-overview-meta	Metadaten-Container
atcb-group-overview-datetime	Zeile für Datum und Uhrzeit
atcb-group-overview-location	Ortszeile
atcb-group-overview-datetime-icon	Icon für Datum und Uhrzeit
atcb-group-overview-location-icon	Orts-Icon
atcb-group-overview-description	Event-Beschreibung
atcb-group-overview-add	Plus-Marke oder Button
atcb-group-overview-marker	Markierung für kompakte RSVP-Einträge

Nicht jeder Part existiert in jedem Layout oder jeder Konfiguration.

Einschränkungen und Hinweise

Öffentliche Daten

Die Gruppe und die zurückgegebenen Event-Daten sind öffentlich, wenn Public Event Overview aktiv ist. Verwende diese Funktion nicht als Zugriffskontrolle.

Client-seitiges Rendering

Die Komponente lädt und rendert die Events im Browser. Berücksichtige die zusätzliche Anfrage bei Performance-, Content-Security-Policy- und Datenschutzprüfungen.

Event-Details bleiben in PRO verwaltet

Die Liste ist eine Übersicht und keine zweite Event-Datenbank. Titel, Daten, Beschreibungen, Orte, Landingpages und RSVP-Konfigurationen sollten weiterhin in Add to Calendar PRO gepflegt werden.

Vollständiges Beispiel

<script src="https://cdn.jsdelivr.net/npm/add-to-calendar-button" async defer></script>

<add-to-calendar-button
  prokey="DEIN-GRUPPEN-PROKEY"
  language="de"
  group-overview-config='{
    "years-only":false,
    "type":"cards",
    "from":"2027-01-01T00:00:00Z",
    "to":"2028-12-31T23:59:59Z",
    "no-details":false,
    "no-add":false,
    "custom-domain":"events.example.com",
    "add-via-list":true
  }'
></add-to-calendar-button>

Eine kürzere Implementierungsanleitung findest du unter Eine Event-Liste auf deiner Webseite erstellen.

Einstellungen überschreiben

Bestimmte Parameter können direkt am HTML-Tag überschrieben werden.

Dies bedeutet, dass die Einstellung, die über das entsprechende Attribut an der Button-Einbindung vorgenommen wird, eine mögliche gegenteilige Einstellung, die in der App vorgenommen wird, überschreibt.

Dies kann hilfreich sein, wenn bspw. Styles im Code definiert werden oder dynamische Inhalte eingefügt werden sollen. Letzeres ist stark limitiert und sollte mit Bedacht genutzt werden! In den meisten Fällen empfiehlt sich hier eher die Arbeit über unsere API.

Alle Einstellungen überschreibbar machen

Du kannst die Option proOverride am Button-Tag setzen und damit alle verfügbaren Einstellungen auf Codeebene überschreiben.

Sei vorsichtig damit, da dies leicht zu widersprüchlichen Daten führen kann, da Änderungen auf Codeebene sonst nirgendwo bei Add to Calendar PRO übernommen werden!

Du solltest mindestens proxy="false" setzen.

Dies kann jedoch in (eher seltenen) Fällen nützlich sein, in denen du nur den Button auf deiner Website verwenden möchtest, während du die Event-Details auch nur dort festlegst (vielleicht aus Datenschutzgründen), während du das Design in der Add to Calendar PRO App verwalten lassen möchtest (vielleicht vom Marketing-Team).

Parameter, die jederzeit überschrieben oder gar nur im Code gesetzt werden können, sind nachfolgend gelistet.

Attribut	Beschreibung	Typ / Format
debug	Loggt Fehler in der JavaScript-Konsole des Browsers und rendert anstelle des Kalenders eine Fehlermeldung.	Boolean
cspnonce	Nötig, sofern du mit strenger Content-Security-Policy arbeitest. Der Wert kann als "nonce" in den CSP-Einstellungen freigegeben werden.	String
instance	Ermöglicht ein "Neu-Rendern" des Buttons, indem die Zahl verändert/erhöht wird.	Number
attendee	Schema "NAME|E-MAIL" (bspw. "Max Muster|[email protected]") oder nur eine E-Mail-Adresse. Nur 1 Eintrag möglich. Ermöglicht die Nutzung von iCal-Status-Funktionalitäten. Erfordert einen gesetzten Organisator. Erzwingt eine dynamische Erzeugung von ics-Dateien anstelle des Abrufs der statischen Datei.	String (NAME|EMAIL)
images	Reichert die Rich-Data-Angaben an. 1-3 Bilder via url. Empfohlen werden 3 Bilder mit einer Breite von je 1920px. Eines mit einem Seitenverhältnis von 1x1, eines mit 4x3 und eines mit 16x9.	Array (urls)
size	Skalierung anpassen. 1-3 Werte. Bei mehreren Werten wird der erste für große, der zweite für mittlere und der dritte für kleine Bildschirme gesetzt. Bei 2 Werten gilt der zweite für mittlere und kleine Bildschirme.	String (X|X|X)
inline	Rendert den Button inline anstelle des standardmäßigen Block-Styles.	Boolean
inlineRsvp	Rendert das RSVP-Formular inline und nicht als Modal nach Button-Klick.	Boolean
forceOverlay	Rendert Dropdowns über allen Elementen. Ressourcen-intensiv, aber für manche Layout notwendig.	Boolean
customLabels	Siehe die entsprechende Einstellung in der App für mögliche Werte. Die Struktur muss einem JSON-Schema entsprechen.	Object
customCss	Lädt eine angegebene externe css-Datei (absoluter Pfad) anstelle des integrierten Styles.	String (url)
lightMode	Definiert wie das Dark/Light-Theme gesetzt werden soll. "system" orientiert sich am Betriebssystem des Nutzers. "bodyScheme" schaltet auf "dark", wenn im body oder html tag die Klasse "atcb-dark" oder "dark" gesetzt ist.	String (system, dark, light, bodyScheme)
styleLight	Siehe die entsprechende Einstellung in der App für mögliche Werte. Beispiel: styleLight="--btn-background: #2f4377; --btn-text: #fff; --font: Georgia, 'Times New Roman', Times, serif;"	String
styleDark	Siehe die entsprechende Einstellung in der App für mögliche Werte. Beispiel: styleDark="--btn-background: #2f4377; --btn-text: #fff;"	String
language	Sprache des Buttons. Optionen: ar, cs, de, en, es, et, fa, fi, fr, hi, id, it, ja, ko, nl, no, ro, pl, pt, sv, tr, vi, zh	String
blockInteraction	Blockiert jegliche Interaktion mit dem Button - mit Ausnahme von Hover-Effekten.	Boolean
disabled	Deaktiviert den Button und zeigt diesen ausgegraut an.	Boolean
hidden	Blendet den Button aus.	Boolean
bypassWebViewCheck	Für Nutzer, die den Button auf ihrem iPhone in einer WebView-Umgebung (z.B. dem Instagram Browser) laden, können wir die ics-Datei nicht direkt zum Download anbieten. Deshalb zeigen wir in diesem Fall eine kleine Anleitung, wie man den Termin stattdessen speichern kann. Wenn du den Button in deiner eigenen Anwendung verwendest; in der du den Download von ics-Dateien im Standardbrowser aktiv zulassen kannst, kannst du diesen Workaround mit der Option bypassWebViewCheck umgehen.	Boolean
customVar	Definiere individuelle Variabeln, die in der Beschreibung und der Ortsangabe deines Events genutzt werden können. Die Struktur muss einem JSON-Schema entsprechen. Ein Feld "name" kann mittels %%name%% in der Beschreibung oder dem Ort genutzt werden.	Object
proxy	Hierbei wird der Nutzer über die Landingpage geleitet, wenn er ein Event speichern möchte. Dadurch können wir den Nutzer in Spezielfällen besser anleiten, du musst allerdings möglicherweise deine Datenschutzbestimmungen erweitern. Diese Option muss gesetzt sein, wenn Klicks auf Add-to-Calendar-Buttons getrackt werden sollen!	Boolean
fakeMobile	Simuliert ein mobiles Endgerät.	Boolean
fakeIOS	Simuliert iOS.	Boolean
fakeAndroid	Simuliert Android.	Boolean