Beispiele

Die nachfolgenden Beispiele veranschaulichen die spannendsten Funktionalitäten.
Wir empfehlen mit der Demo zu experimentieren, um weitere Varianten zu erleben.

Die Beispiele auf dieser Seite haben ein paar Gemeinsamkeiten. Sie nutzen alle die gleichen Zeiten (außer das Dynamik-Beispiel), den Standard-Stil, und passen sich dem lightMode der Webseite an.

Speziellere Beispiele und Erläuterung von komplexeren Konfigurationen findest du in der "Profi-Konfiguration".

Beispiel 1: Das Übliche

Dies ist das gewöhnliche Standard-Setup mit allen verfügbaren Kalender-Links und einer definierten Zeitzone

<add-to-calendar-button
  name="[Reminder] Add to Calendar Button testen"
  startDate="2024-12-23"
  startTime="10:15"
  endTime="23:30"
  timeZone="Europe/Berlin"
  location="World Wide Web"
  description="Entdecke die wahrscheinlich einfachste Möglichkeit einen Add to Calendar Button in dein Web-Projekt zu integrieren:[br]→ [url]https://add-to-calendar-button.com/de/|Hier klicken![/url]"
  options="'Apple','Google','iCal','Outlook.com','Microsoft 365','Microsoft Teams','Yahoo'"
  lightMode="bodyScheme"
  language="de"
></add-to-calendar-button>

Beispiel 2: Ganztages-Event

Für Ganztages-Events muss lediglich die Information über die Uhrzeit weggelassen werden.
Für derartige Events ist die Zeitzone obsolet.

<add-to-calendar-button
  name="[Reminder] Add to Calendar Button testen"
  startDate="2024-12-23"
  location="World Wide Web"
  description="Entdecke die wahrscheinlich einfachste Möglichkeit einen Add to Calendar Button in dein Web-Projekt zu integrieren:[br]→ [url]https://add-to-calendar-button.com/de/|Hier klicken![/url]"
  options="'Apple','Google','iCal','Outlook.com','Microsoft 365','Microsoft Teams','Yahoo'"
  lightMode="bodyScheme"
  language="de"
></add-to-calendar-button>

Beispiel 3: Dynamische Zeiten

Anstelle von festen Terminen kannst du auch dynamische Werte für das Datum nutzen.

Mit dem Wort "today" wird stets der jeweils aktuelle Tag ausgewählt.
Füge eine Zahl, wie "+7" an das Datum (bspw. "2025-04-18+7") und es werden 7 Tage addiert. Im Beispiel kombinieren wir beides und fügen immer 2 Tage an das jeweils aktuelle Datum.

Dieses Beispiel erzeugt im Übrigen ein Online-Event im Schema.org-Kontext, da die "location" eine URL ist.

<add-to-calendar-button
  name="[Reminder] Add to Calendar Button testen"
  startDate="today+2"
  startTime="10:15"
  endTime="23:30"
  timeZone="Europe/Berlin"
  location="https://add-to-calendar-button.com/de/"
  description="Entdecke die wahrscheinlich einfachste Möglichkeit einen Add to Calendar Button in dein Web-Projekt zu integrieren:[br]→ [url]https://add-to-calendar-button.com/de/|Hier klicken![/url]"
  options="'Apple','Google','iCal','Outlook.com','Yahoo'"
  lightMode="bodyScheme"
  language="de"
></add-to-calendar-button>

Beispiel 4: Event mit Wiederholungen

Du kannst Wiederholungen grundsätzlich ganz einfach mit einer RRULE definieren.
Beachte, dass die Regel technisch und logisch gültig sein muss und die Option nicht von allen Kalender-Typen unterstützt wird - im Beispiel tauchen die definierten Yahoo- und Outlook-Optionen (sowie Google unter iOS) aus diesem Grund nicht auf. 

<add-to-calendar-button
  name="[Reminder] Add to Calendar Button testen"
  startDate="2024-12-23"
  startTime="10:15"
  endTime="23:30"
  timeZone="Europe/Berlin"
  location="World Wide Web"
  description="Entdecke die wahrscheinlich einfachste Möglichkeit einen Add to Calendar Button in dein Web-Projekt zu integrieren:[br]→ [url]https://add-to-calendar-button.com/de/|Hier klicken![/url]"
  options="'Apple','Google','iCal','Outlook.com','Yahoo'"
  recurrence="RRULE:FREQ=WEEKLY;INTERVAL=1;WKST=MO;BYDAY=WE,FR;COUNT=6"
  lightMode="bodyScheme"
  language="de"
></add-to-calendar-button>

Alternativ zu der RRULE kannst du aber auch die "sprechenderen" Optionen nutzen.
Die "Konfiguration"-Seite hält mehr Details dazu bereit. 

<add-to-calendar-button
  name="[Reminder] Add to Calendar Button testen"
  startDate="2024-12-23"
  startTime="10:15"
  endTime="23:30"
  timeZone="Europe/Berlin"
  location="World Wide Web"
  description="Entdecke die wahrscheinlich einfachste Möglichkeit einen Add to Calendar Button in dein Web-Projekt zu integrieren:[br]→ [url]https://add-to-calendar-button.com/de/|Hier klicken![/url]"
  options="'Apple','Google','iCal','Outlook.com','Yahoo'"
  recurrence="weekly"
  recurrence_interval="1"
  recurrence_count="6"
  recurrence_byDay="WE,FR"
  lightMode="bodyScheme"
  language="de"
></add-to-calendar-button>

Beispiel 5: Event mit mehreren Terminen

Events können aus mehreren Terminen bestehen, die nicht "wiederholend" sind.
Bspw. ein Workshop, der aus 2 Teilen besteht.

Du kannst diese einzelnen Teile mit dem "dates" Objekt in einem Event spezifizieren.
Zeit-Informationen je Sub-Event sind verpflichtend - Daten auf übergeordneter Ebene werden ignoriert.
Sub-Events werden automatisch nach StartDate sortiert.
Falls nötig, kannst du die '[' und ']' Zeichen aussparen (bspw. bei Nutzung des WordPress Shortcodes). 

<add-to-calendar-button
  name="Termin-Reihe"
  dates='[
    {
      "name":"Reminder 1/3, den Add to Calendar Button zu testen",
      "description":"Dies ist der erste Teil des Reminders den Add to Calendar Button unter [url]https://add-to-calendar-button.com/de/[/url] zu testen",
      "startDate":"today+3",
      "startTime":"10:15",
      "endTime":"23:30"
    },
    {
      "name":"Reminder 3/3, den Add to Calendar Button zu testen",
      "description":"Dies ist der dritte Teil des Reminders den Add to Calendar Button unter [url]https://add-to-calendar-button.com/de/[/url] zu testen",
      "startDate":"today+8",
      "startTime":"09:00",
      "endTime":"19:00"
    },
    {
      "name":"Reminder 2/3, den Add to Calendar Button zu testen",
      "description":"Dies ist der zweite Teil des Reminders den Add to Calendar Button unter [url]https://add-to-calendar-button.com/de/[/url] zu testen",
      "startDate":"today+5",
      "startTime":"11:30",
      "endTime":"20:00"
    }
  ]'
  timeZone="Europe/Berlin"
  location="World Wide Web"
  options="'Apple','Google','iCal','Outlook.com','Yahoo'"
  lightMode="bodyScheme"
  language="de"
></add-to-calendar-button>
Get blown away by the PRO offering

Du möchtest mehr Funktionen bei deutlich weniger Stress?

Beispiel 6: Individuelles Label

Du kannst den Text auf dem Button sowie alle anderen Texte individuell gestalten.
Im Beispiel haben wir zudem den listStyle zu einer überlagernden Liste (overlay) verändert, an der Skalierung gedreht und auch der ics-Datei einen eigenen Namen gegeben.

Weitere Texte können mit der "customLabels"-Option verändert werden. Die "Konfiguration"-Seite und unser Profi-Beispiel beinhalten mehr Details. 

<add-to-calendar-button
  name="[Reminder] Add to Calendar Button testen"
  startDate="2024-12-23"
  startTime="10:15"
  endTime="23:30"
  timeZone="Europe/Berlin"
  location="World Wide Web"
  description="Entdecke die wahrscheinlich einfachste Möglichkeit einen Add to Calendar Button in dein Web-Projekt zu integrieren:[br]→ [url]https://add-to-calendar-button.com/de/|Hier klicken![/url]"
  options="'Apple','Google','iCal','Outlook.com','Yahoo'"
  label="Speicher mich!"
  iCalFileName="Reminder-Event"
  listStyle="overlay"
  size="5"
  lightMode="bodyScheme"
  language="de"
></add-to-calendar-button>

Beispiel 7: Inline-Button

Standardmäßigist der Button ein Block-Element, das bei Hover ein Dropdown öffnet.
Du kannst den Button alternativ aber auch inline rendern lassen.

Im Beispiel haben wir zudem den "listStyle" auf "modal" gesetzt, was wiederum die Standard-Trigger-Aktion von "Hover" auf "Click" setzt.

Tu es! →
<add-to-calendar-button
  name="[Reminder] Add to Calendar Button testen"
  startDate="2024-12-23"
  startTime="10:15"
  endTime="23:30"
  timeZone="Europe/Berlin"
  location="World Wide Web"
  description="Entdecke die wahrscheinlich einfachste Möglichkeit einen Add to Calendar Button in dein Web-Projekt zu integrieren:[br]→ [url]https://add-to-calendar-button.com/de/|Hier klicken![/url]"
  options="'Apple','Google','iCal','Outlook.com','Yahoo'"
  label="Klick mich hart!"
  inline
  listStyle="modal"
  lightMode="bodyScheme"
  language="de"
></add-to-calendar-button>

Beispiel 8: Ein einzelner Kalender-Typ

Wenn nur 1 Kalender-Typ gesetzt ist, wird keine Liste erzeugt.
Stattdessen wird der Button selbst ein direkter Kalender-Link. 

<add-to-calendar-button
  name="[Reminder] Add to Calendar Button testen"
  startDate="2024-12-23"
  startTime="10:15"
  endTime="23:30"
  timeZone="Europe/Berlin"
  description="Entdecke die wahrscheinlich einfachste Möglichkeit einen Add to Calendar Button in dein Web-Projekt zu integrieren:[br]→ [url]https://add-to-calendar-button.com/de/|Hier klicken![/url]"
  options="Google"
  lightMode="bodyScheme"
  language="de"
></add-to-calendar-button>

Beispiel 9: Button splitten

Mit der Option "buttonsList" kann der Button in mehrere aufgeteilt werden - einer je Kalender-Typ.

Im Beispiel haben wir hierbei zudem den runden Button-Stil gesetzt und den Text auf dem Button deaktiviert.

<add-to-calendar-button
  name="[Reminder] Add to Calendar Button testen"
  startDate="2024-12-23"
  startTime="10:15"
  endTime="23:30"
  timeZone="Europe/Berlin"
  description="Entdecke die wahrscheinlich einfachste Möglichkeit einen Add to Calendar Button in dein Web-Projekt zu integrieren:[br]→ [url]https://add-to-calendar-button.com/de/|Hier klicken![/url]"
  options="'Apple','Google','iCal','Outlook.com','Yahoo'"
  buttonsList
  hideTextLabelButton
  buttonStyle="round"
  lightMode="bodyScheme"
  language="de"
></add-to-calendar-button>

Teste die meisten Optionen direkt live in unserem Testbereich!

Live ausprobieren

Wenn du bereit für verrücktere Konfigurationen bist, kannst du auch die "Danger Zone" erkunden.

Profi-Konfiguration
Get blown away by the PRO offering

Entdecke das PRO-Angebot

Mehr Funktionen (wie RSVP) und deutlich weniger Stress dank ics-Datei-Hosting, No-Code-Bearbeitung und vielem mehr.

Impressum | Datenschutz | Lizenz | Hilfe
© 2024 , Current Version: 2.8.0