Konfiguration
Die nachfolgende Liste beinhaltet alle möglichen Attribute, um deinen Add to Calendar Button nach deinen Wünschen zu configurieren.
Wirf unbedingt auch einen Blick auf unsere Demo, bei welcher du mit den meisten Paramtern live herumspielen kannst - und durchstöbere die "Beispiele"-Seiten für weitere Erläuterungen und speziellere Funktionalitäten.
Um einen boolschen Wert in dem HTML-Element zu definieren, kannst du einfach nur den Namen als Attribute setzen.
Wenn er nicht gesetzt ist, definiert das die Option automatisch als "false". Alternativ kannst du den Wert aber auch immer vollständig als String ergänzen: attributeName="true".
Event-Parameter
| Name(Wert) | Wert | Details |
|---|---|---|
| proKey | String | Wenn du unseren PRO-Service nutzt, kannst du das "proKey"-Attribut nutzen, um den Button mit einem bestimmten Event zu verknüpfen. In diesem Fall müssen ansonsten keine weiteren Parameter im Code definiert werden, da die weitere Verwaltung zu 100% im Add to Calendar PRO Admin-Bereich erfolgt. |
| name | String Pflichtfeld | Der Titel deines Events. Sollte ein eher kurzer String sein. Auch Pflicht, sofern du die "dates"-Option nutzt (Multi-Date). In diesem Fall dient der Wert als Fallback und Name für die Termin-Reihe. Bei Nutzung der Kalender-Abonnement-Funktion wird der Wert für die Microsoft-Services zudem als Kalendar-Name genutzt. |
| description | String | Unterstützt HTML-Pseudo-Tags zur Formatierung: [url], [br], [hr], [p], [strong], [u], [i], [em], [li], [ul], [ol], [h*] (wie etwa h1, h2, h3, ...). Einen Link-Text spezifizierst du mit folgendem Schema: [url]https://....|URL Text[/url]. (Bei Kompatibilitätsproblemen kannst du auch geschweifte {*} anstelle von eckigen [*] Klammern nutzen.) (Apple, Yahoo und Microsoft Teams werden hierbei nicht vollständig unterstützt und der Wert automatisch zu Plain Text transformiert, womit nur Zeilenumbrüche und Links dargestellt werden.) Beispiel |
| startDate | String Pflicht, wenn "dates" oder "subscribe" optionen nicht vorhanden YYYY-MM-DD | Ein Datum muss im Schema YYYY-MM-DD gemäß ISO-8601 formatiert sein Du kannst das Wort "today" nutzen, um dynamisch den jeweils aktuellen Tag zu setzen. Wenn du bspw. "+5" hinzufügst, werden automatisch 5 Tage aufaddiert. Inoffiziell werden Formate wie "YYYY-MM-DDTHH:MMZ" auch unterstützt. Beispiel |
| startTime | String HH:MM | Sofern nicht spezifiziert, wird das Event als Ganztages-Event abgebildet. |
| endDate | String YYYY-MM-DD | Ein Datum muss im Schema YYYY-MM-DD gemäß ISO-8601 formatiert sein Du kannst das Wort "today" nutzen, um dynamisch den jeweils aktuellen Tag zu setzen. Wenn du bspw. "+5" hinzufügst, werden automatisch 5 Tage aufaddiert. Inoffiziell werden Formate wie "YYYY-MM-DDTHH:MMZ" auch unterstützt. |
| endTime | String HH:MM | Sofern nicht spezifiziert, wird das Event als Ganztages-Event abgebildet. |
| timeZone | String Standard:GMT | Kein Pflichtfeld, aber wärmstens empfohlen. Eine Liste valider Zeitzonen findest du auf Wikipedia . Du kannst "currentBrowser" als Wert nutzen, um dynamisch die Zeitzone des jeweiligen Nutzers (Browser) zu wählen. Nutze diese Funktion mit Vorsicht, da dies bedeutet, dass die Zeitangabe für das Event je Nutzer unterschiedlich sein kann, was meist nicht gewollt ist. Eine Zeitzone ist nur relevant, wenn startTime und endTime spezifiziert sind. |
| useUserTZ | Boolean Standard:False | Diese Option transformiert Zeit und Zeitzone in die Einstellungen des jeweiligen Nutzers. Wenn du diese Option auf "true" setzt, wird die Zeitzone ignoriert und die Zeit in die des Nutzers umgerechnet. Dies verhält sich anders als die künstliche "browserTime"-Zeitzone, welche nur die Zeitzone, nicht aber die Zeit selbst, anpasst. Verwende diese Option mit Bedacht, da das Manipulieren der Zeitzone pro Nutzer unerwünschte Nebeneffekte haben kann. Dies sollte normalerweise vom Kalender-Programm des Nutzers übernommen werden! |
| location | String Pflicht, wenn Schema.org Rich-Date gewünscht | Kann alles mögliche sein. Wenn es eine URL ist, so wird das Event innerhalb der Schema.org-Daten als "Online-Event" klassifiziert. Ein Online-Event wird auf Date-Buttons nicht angezeigt. Zusätzlich werden in diesem Fall Zeitangaben auf diesem Button-Type in die Zeitzone des Nutzers übertragen (geschieht auch bei den Werten "Global", "Worldwide" und "Online"). |
| status | String Optionen:TENTATIVE, CONFIRMED, CANCELLED Standard:CONFIRMED | Kann genutzt werden, um Änderungen an einem Event zu verwalten. Gemäß der iCalendar-Spezifikation RFC5545 . Beispiel |
| sequence | Number Standard:0 | Muss eine positive ganze Zahl sein. Muss größer werden, wenn Veränderungen am Event vorgenommen werden. Beispiel |
| uid | String XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX Standard:Zufällig generiert | Die einzigartige ID eines Events, wie sie für iCal-Dateien genutzt wird. Darf nur Buchstaben, Ziffern und Bindestriche enthalten; kleiner 255 Zeichen gesamt. Ein Hex-kodierter zufälliger "Universally Unique Identifier" (UUID) wird empfohlen. |
| organizer | String NAME|E-MAIL | Schema "NAME|E-MAIL" (bspw. "Max Muster|[email protected]"). Der "Organizer" wird innerhalb der Schema.org-Daten sowie in iCal-Dateien integriert. Sofern diese Option gesetzt wird, verändert sich auch die iCal-Struktur. Anstelle eines einfachen Events wird eine Event-Einladung, der man zu- oder absagen kann, erzeugt. Beispiel |
| attendee | String NAME|E-MAIL | Schema "NAME|E-MAIL" (bspw. "Max Muster|[email protected]") oder einfach nur eine E-Mail-Adresse (Name ist optional). Mit dieser Option kannst du ein Event im Kalender eines Nutzers aktualisieren, wenn dieser Nutzer auch die neue iCal-Datei speichert. Es kann nur 1 "attendee" gesetzt werden Diese Person muss gleichzeitig diejenige sein, die das Event speichert. Wenn du nicht über diese Information verfügst, solltest du die Option nicht nutzen! Wenn du einen "attendee" definierst, muss auch die "organizer" option gesetzt sein. |
| dates | Array of Objects | Mit dem "dates"-Objekt kannst du eine Termin-Reihe spezifizieren. Es beinhaltet im Grunde die gleichen Parameter wie die Haupt-Ebene, bietet aber die Möglichkeit mehrere Events zu definieren. Abgesehen von Datums- und Zeitangaben wird für die möglichken Parameter stets eine Information auf der Haupt-Ebene genutzt, sofern sie innerhalb des "dates"-Elements fehlt. Für die "UID" geschieht dies allerdings nur für das erste Event (da die ID einzigartig sein muss). Weitere Events erhalten eine eigene, zufällig generierte ID. Attribute je Sub-Event-Block:
Beispiel |
| recurrence | String Optionen: "RRULE:..."; daily, weekly, monthly, yearly | Definiert wiederkehrende Events. Diese Optione deaktiviert die Yahoo- und Microsoft-Kalendar-Optionen (sowie Google unter iOS), da die Funktion dort aktuell nicht unterstützt wird (in diesen Fällen können Nutzer weiterhin auf die iCal-Datei zurückgreifen). Bleibt keine Option übrig, wird iCal als Fallback aktiviert. Beachte, dass es nicht möglich ist, mehr als 1 Termin (dates option) gemeinsam mit der recurrence option zu verwenden. Du kannst jede valide RRULE nutzen, um eine entsprechende Regel anzuwenden (Generator-Tool ). Beachte, dass das startDate ein valides Datum innerhalb des definierten Regelwerks sein muss! Alternativ zur RRULE kannst du auch die folgenden einfacheren und spezifischeren Einstellungen nutzen. Diese generieren die RRULE automatisch für dich im Hintergrund. In diesem Fall würdest du als Wert für die "recurrence"-Option lediglich die Frequenz (täglich, wöchentlich, ...) anstelle der kompletten RRULE definieren. Beispiel |
| recurrence_interval | Number Standard:1 | Bestimmt den Abstand zwischen Wiederholungen. "3" würde "jedes dritte Vorkommnis" beschreiben. |
| recurrence_until | String | Definiert ein End-Datum. Beachte, dass dies von vielen Anwendungen nicht unterstützt wird! Nutze stattdessen lieber die "count"-Option. |
| recurrence_count | Number | Definiert die maximale Anzahl an Wiederholungen. Sofern recurrence_until und recurrence_count definiert sind, gilt, was zuerst eintritt. Sofern keiner der Werte gegeben ist, erfolgt die Wiederholung endlos. |
| recurrence_byDay | String | Bestimmt die Wochentage (MO, TU, WE, TH, FR, SA, SU), an denen das Event stattfindet. Sinnvoll, sofern ein Termin an den Wochentag (bspw. Dienstag) und kein bestimmtes Datum geknüpft ist. Erfordert eine wöchentlichen Frequenz. Kann um Zahlen erweitert werden, um Regeln auszudrücken, wie den 3ten Montag (3MO). Mehrere Tage möglich; durch Komma getrennt. |
| recurrence_byMonthDay | String | Nutze diese Option anstelle von "byDay", sofern du dich auf ein bestimmtes Datum (1, 2, ... 31) anstatt eines Wochentags beziehen möchtest. Erfordert ein monatliche Frequenz. Mehrere Werte möglich; durch Komma getrennt. |
| recurrence_byMonth | String Optionen:1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 | Beschreibt die Monate (1, 2, 3, ... 12), in denen das Event wiederholt wird. Erfordert ein jährliche Frequenz. Mehrere Werte möglich; durch Komma getrennt. |
| recurrence_weekstart | String Optionen:MO, TU, WE, TH, FR, SA, SU Standard:MO | Definiert einen bestimmten Wochentag als Wochenstart. |
| availability | String Optionen:busy, free Standard:Standard-Einstellung im Kalender des Nutzers | Standardmäßig wird ein Event gemäß der Standard-Einstellung im Kalender des jeweiligen Nutzers als beschäftigt/verfügbar gespeichert. Für Apple-, iCal- und Google-Kalender kann dieser Wert mittels dieser Option erzwungen werden. |
| subscribe | Boolean Standard:False | Alternativ zur Angabe eines bestimmten vordefinierten Events kannst du auch einen Kalender bereitstellen und ihn zum Abonnieren anbieten (erfordert einen gehosteten Kalender). Um das Abonnement über den Button anzubieten, musst du zusätzlich die icsFile-Option definieren. "Name" und "startDate" wären für organisatorische Zwecke immer noch erforderlich, aber jeder andere Event-Parameter kann im Abonnementfall übersprungen werden. Für Microsoft-Dienste wird der "Name" als Name für den Kalender verwendet. Microsoft Teams wird derzeit nicht unterstützt und automatisch deaktiviert. Gleiches gilt für andere Microsoft-Dienste auf mobilen Geräten. Sollte der Browser des Nutzers keine installierte Kalender-App erkennen, kann dies zu einer leeren Seite führen. Die PRO-Version optimiert dies mit einem erklärenden Zwischenbildschirm. Beispiel |
| icsFile | String URL | Die iCal/ics-Datei wir dynamisch generiert. Dies hat den Nachteil, dass der Prozess in seltenen Fällen vom Browser des Nutzers blockiert werden kann. Mit dieser Option kannst du stattdessen auf eine bestehende ics-Datei verweisen. Im "subscribe"-Fall muss hier der externe Kalender referenziert werden. Falls du mehrere Termine und einen "organizer" oder "status" definiert hast, musst du mehrere ics-Dateien vorhalten. Die Datei für den ersten Termin wird hier referenziert, während alle weiteren Termine eine Datei mit dem gleichen Namen zzgl. einer fortlaufende Nummer (beginnend mit 2) benötigen (bspw. "event-2.ics"). |
| iCalFileName | String Standard:event-to-save-in-my-calendar | Wenn du einen bestimmten Namen für die generierte ics-Datei (iCal) definieren möchten, kannst du diesen über die Option iCalFileName definieren. |
| created | String YYYYMMDDTHHMMSSZ Standard:Uhrzeit bei Download der Datei | Das "Created"-Feld in der iCal-Datei erhält grundsätzlich den Zeitpunkt, zu welchem die Datei generiert und heruntergeladen wird. Nutze diese Option, um stattdessen einen bestimmten Timestamp zu setzen. Spezifiziere den Zeitpunkt als UTC Timestamp. Bspw. "20231201T103000Z". |
| updated | String YYYYMMDDTHHMMSSZ Standard:Uhrzeit bei Download der Datei | Das "Updated"-Feld in der iCal-Datei erhält grundsätzlich den Zeitpunkt, zu welchem die Datei generiert und heruntergeladen wird. Nutze diese Option, um stattdessen einen bestimmten Timestamp zu setzen. Spezifiziere den Zeitpunkt als UTC Timestamp. Bspw. "20231201T103000Z". |
Du möchtest mehr Funktionen bei deutlich weniger Stress?
Entdecke das PRO-AngebotLayout-Parameter
| Name(Wert) | Wert | Details |
|---|---|---|
| options | Array Optionen:Apple, Google, iCal, Microsoft365, MicrosoftTeams, Outlook.com, Yahoo | Array an Kalender-Arten, die in der Liste erscheinen. Sofern du nur 1 Option definierst wird der Button das Icon dieser Option anzeigen sowie direkt die jeweilige Kalender-Aktion auslösen und keine Auswahlliste öffnen (Singleton-Case). Optionen können deaktiviert werden, wenn sie aufgrund anderere Einstellungen nicht unterstützt werden! Auf iOS-Geräten wird die iCal-Option durch "Apple" ersetzt. Du kannst eine andere Liste an Optionen für mobile Geräte definieren, indem du die optionsMobile-Option nutzt. Wenn du auch die optionsIOS-Option setzt, wird diese für iOS (nicht Mac!) berücksichtigt, während optionsMobile für Android und andere mobile Geräte gilt. |
| buttonStyle | String Optionen:default, 3d, flat, round, neumorphism, text, date, custom, none Standard:default | Es gibt mehrere integrierte Button-Stile (Themes), die auch einige weitere Parameter beeinflussen. Wir empfehlen die Optionen der Reihe nach auszuprobieren, um herauszufinden, wie sie sich im Detail verhalten. "none" würde gar kein CSS laden, während "custom" eine externes CSS-Datei über die "customCss"-Option erfordert. |
| inline | Boolean Standard:False | Diese Option rendert den Button inline anstelle des standardmäßigen Block-Styles. Beispiel |
| customCss | String URL | Du kannst eine externe CSS-DAtei anstelle der integrierten Optionen laden. Spezifiziere die URL der Datei hier und nutze die buttonStyle-Option "custom". Beispiel |
| buttonsList | Boolean Standard:False | Wenn du diese Option aktivierst wird ein Button je Kalender-Typ erzeugt - anstelle eines Buttons mit entsprechender Liste. Beispiel |
| label | String Standard:Add to Calendar | Diese Option überschreibt den Text auf dem Button. |
| trigger | String Optionen:hover, click Standard:hover | In den meisten Fällen wird das Erscheinen der Kalendar-Link-Liste über Hover ausgelöst. Wenn du stattdessen eine Klick-Interaktion erzwingen möchtest, kannst du dies über diese Option definieren. |
| listStyle | String Optionen:dropdown, dropdown-static, dropup-static, overlay, modal Standard:dropdown | Die Kalender-Link-Liste kann als Dropdown, Overlay oder Modal dargestellt werden. Der Dropdown-Stil berücksichtigt auch die Position auf dem Bildschirm und zeigt die Liste je nach Situation über oder unter dem Button an. Nutze den Wert "dropdown-static", bzw. "dropup-static", um sie immer unterhalb oder oberhalb anzuzeigen. |
| forceOverlay | Boolean Standard:False | Diese Option rendert das Dropdown zusammen mit dem Button über allem anderen - ähnlich der Modal-Option. Dies kann nützlich sein, wenn dein Layout und die HTML-Struktur nicht mit der Standard-Option, bei der das Dropdown direkt am Button gerendert wird, kompatibel ist. Aufgrund der zusätzlichen Berechnungen geht dies mit kleinen Performance-Einbußen einher. |
| hideBackground | Boolean Standard:False | Mit dieser Option wird der Hintergrund vollständig transparent erzeugt. |
| hideIconButton | Boolean Standard:False | Diese Option verbirgt das Icon auf dem Button. |
| hideIconList | Boolean Standard:False | Diese Option verbirgt die Icons in der Kalender-Link-Liste. |
| hideIconModal | Boolean Standard:False | Diese Option verbirgt das Icon in den Modal-Dialogen. |
| hideTextLabelButton | Boolean Standard:False | Diese Option verbirgt den Text auf dem Button. |
| hideTextLabelList | Boolean Standard:False | Diese Option verbirgt die Texte in der Kalender-Link-Liste. |
| hideCheckmark | Boolean Standard:False | Nach Klick auf einen Kalender-Link wird das Event als "gespeichert" markiert und ein Icon auf den Button gesetzt. Dies ist nicht der Fall, wenn der Text auf dem Button verborgen wird, die buttonsList-Option gesetzt ist oder mit der atcb_action-Variante gearbeitet wird. Nutze diese Option hier, um das Icon auch in allen anderen Fällen zu verbergen. |
| pastDateHandling | String Optionen:none, disable, hide Standard:none | Diese Option bestimmt, was passiert, sollte ein Termin in der Vergangenheit liegen. Wenn du sie auf "disable" setzt, wird der Button deaktiviert, bei "hide" vollständig ausgeblendet. In beiden Fällen kann der Nutzer das Event nicht mehr speichern. Beachte, dass die Funktion bei wiederkehrenden Events nicht greift! |
| size | String X|X|X Standard:6|6|6 | Du kannst eine Zahl zwischen 0 und 10 spezifizieren, um den Button zu skalieren. Du kannst 1 Zahl (bspw. "5") oder bis zu 3 Werte (bspw. "8|6|4") definieren. Bei mehreren Werten wird der erste für große, der zweite für mittlere und der dritte für kleine Bildschirme gesetzt. Sofern 2 Werte angegeben werden, so gilt der zweite für mittlere und kleine Bildschirme. |
| lightMode | String Optionen:system, dark, light, bodyScheme Standard:light | Jeder Button kommt mit einem Dark- und Light-Theme. Mit der Optiomn "lightMode" kann dies explizit ausgewählt werden. Du kannst auch den Wert "system" nutzen, um automatisch den Wert des Betriebssystems des Nutzers zu übernehmen. Mit dem Wert "bodyScheme" wird automatisch nach der class "atcb-dark" (oder "dark") im html oder body tag Ausschau gehalten - der Button lässt sich in diesem Fall dynamisch dem Stil der Webseite anpassen. |
| language | String Optionen:ar, cs, de, en, es, et, fa, fi, fr, hi, id, it, ja, ko, nl, no, ro, pl, pt, sv, tr, vi, zh Standard:en | Sofern du die Text-Blöcke in einer anderen Sprache als Englisch anzeigen möchtest, kannst du die inkludierten Übersetzungen nutzen (i18n). Spezifiere einfach eine der unterstützten Sprachen als ISO 639-1 code . Für Arabisch, Persisch wird zudem Rechts-nach-Links (RTL) für alle Elemente unterstützt und automatisch angewendet. |
| customLabels | Object | Text-Blöcke können über die Option "customLabels" verändert werden. Hierbei muss eine JSON-Struktur mit den zu überschreibenden Texten definiert werden. Sieh dir die atcb-i18n.js-Datei für eine Liste der verfügbaren Keys an. Ein so manipulierter Text überschreibt auch jegliche Übersetzung. Für Text-Blöcke kannst hierbei die gleichen HTML-Pseudo-Tags nutzen, wie sie auch in der "description"-Option möglich sind. Beispiel |
| styleLight | String | Du kannst globale CSS Variabeln des Buttons überschreiben. Alle möglichen Einträge findest du zu Beginn der jeweiligen CSS-Datei im Repository . Beispiel: styleLight="--btn-background: #2f4377; --btn-text: #fff; --font: Georgia, 'Times New Roman', Times, serif;" Die styleLight-Option definiert den Standard. Um Dark-Mode-Variabeln zu überschreiben, musst du zusätzlich die styleDark-Option setzen. |
| styleDark | String | Du kannst globale CSS Variabeln des Buttons überschreiben. Alle möglichen Einträge findest du zu Beginn der jeweiligen CSS-Datei im Repository . |
Du möchtest mehr Funktionen bei deutlich weniger Stress?
Entdecke das PRO-AngebotWeitere Parameter
| Name(Wert) | Wert | Details |
|---|---|---|
| images | Array URLs | Bilder werden verwendet, um die Rich-Data-Angaben anzureichern und somit bspw. Rich-Snippets in den Google-Suchergebnissen zu steuern. Es wird empfohlen, mindestens ein Bild über eine absolute URL mit einer Breite von mindestens 720px zu definieren. Idealerweise definierst du 3 Bilder mit einer Breite von je 1920px. Eines mit einem Seitenverhältnis von 1x1, eines mit 4x3 und eines mit 16x9. Wenn nichts angegeben ist, wird ein Standard-Bild verwendet. |
| hideRichData | Boolean Standard:False | Sofern du "name", "startDate" und "location" definierst, werden beim Erstellen des Buttons automatisch Schema.org-Daten generiert. Mit dieser Option kann dies verhindert werden. |
| identifier | String Standard:Aufsteigende Nummer | Jedes generierte Button- und Kalender-Link-Element besitzt eine sprechende ID, die für Tracking-Maßnahmen genutzt werden kann. Schema: "atcb-btn-IDENTIFIER", bzw. "atcb-btn-IDENTIFIER-google" (für die Google-Option). Der IDENTIFIER ist im Standard eine aufsteigende Numer, kann mittels dieser Option aber überschrieben werden (keine Sonderzeichen erlaubt; muss einzigartig sein). |
| bypassWebViewCheck | Boolean Standard:False | 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 und gleichzeitig die Datei explizit mit der "icsFile"-Option bereitstellst, kannst du diesen Workaround mit der Option bypassWebViewCheck umgehen. |
| hideBranding | Boolean Standard:False | Standardmäßig wird ein dezentes Branding integriert. Dies ist eine kleine Unterstützung für dieses kostenfreie Open-Source-Projekt. Sofern du das Projekt nicht unterstützen möchtest, kannst du mit dieser Option das Branding entfernen (im Einklang mit den Lizenzbedingungen). |
| instance | Number | Nutze dieses Attribut, um einen Button durch Hochzählen des Werts neu zu rendern. |
| proOverride | Boolean Standard:False | Ist diese Option aktiv, überschreiben jegliche Einstellungen die korrespondierenden Werte, die über die PRO-App gesetzt wurden. Nutze dies mit Vorsicht, da sich hierdurch sehr leicht Inkonsistenzen über diverse Systeme ergeben können! |
| debug | Boolean Standard:False | Wenn du diese Option aktivierst, wird jede Fehlkonfiguration in der JavaScript-Konsole des Browsers angezeigt und anstelle des Kalenders eine Fehlermeldung ausgegeben. Dies ist hilfreich, wenn der Button zum ersten Mal implementiert wird. |
Entdecke das PRO-Angebot
Mehr Funktionen (wie RSVP) und deutlich weniger Stress dank ics-Datei-Hosting, No-Code-Bearbeitung und vielem mehr.