Wie man den Add to Calendar Button installiert

Schritt 1: Integration via CDN

Lade das Skript, indem du den nachfolgenden "Script Tag" im head-Bereich deiner Webseite einfügst.
Das Skript lädt automatisch auf nicht-blockierende Art und Weise. Daher ist es im Zweifel nicht entscheidend, wo genau es platziert wird.

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

Schritt 2: Loslegen

Beginne mit der Nutzung, indem du einen <add-to-calendar-button> Tag in deinem HTML-Quellcode einfügst - mit den Optionen als Attribute.

Ganz genau - es ist derart einfach.

Dein Code kann hierbei bspw. wie folgt aussehen.

<add-to-calendar-button
  name="Titel"
  options="'apple','google'"
  location="World Wide Web"
  start-date="2026-10-18"
  end-date="2026-10-18"
  start-time="10:15"
  end-time="23:30"
  time-zone="Europe/Berlin"
  language="de"
></add-to-calendar-button>

Stile & Sprachen

Das Skript wird mit dem "default"-Button-Style und dem englischen Sprachpaket ausgeliefert - der Button sieht also von Haus aus gut aus und funktioniert ohne jegliche zusätzliche Konfiguration.

Wenn du das Browser-Skript direkt lädst, werden weitere Styles und Sprachen automatisch bei Bedarf geladen (jeweils wenige KB). Bei gebündelten Integrationen solltest du die benötigten Module wie unten gezeigt explizit registrieren.

Laden via CDN (Vanilla JS)

Mit dem CDN-Script-Tag werden On-Demand-Styles und -Sprachen von derselben Quelle wie das Skript selbst geladen - nichts weiter einzustellen. Falls du das Skript selbst hostest, setze das "style-source"-Attribut auf das Verzeichnis, das die styles/- und locales/-Ordner enthält.

Siehe die Optionen "button-style" und "language" auf der Konfigurations-Seite für alle Details.