Wie man den Add to Calendar Button mit Astro nutzt

Schritt 0: Wähle ein Vorgehen

Für Static Site Generators (SSG) empfehlen wir generell die Nutzung des Add to Calendar Buttons via CDN.
Alternativ kannst du aber auch das npm Package installieren und das Modul über eine Observer-Funktion implementieren.

Wir beschreiben nachfolgend alle Optionen.

Choose your fighter!

Schritt 1: Setup

Option A: 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@2" async defer></script>

Option B: npm Installation

Alternativ kannst du das Package auch aus der npm Registry installieren.

npm install add-to-calendar-button

<script type="module" hoist>
  const observer = new IntersectionObserver((entries) => {
    for (const entry of entries) {
      if (!entry.isIntersecting) continue;
      observer.disconnect();
      import('../../node_modules/add-to-calendar-button/dist/module/index.js');
    }
  });
  const instances = document.querySelectorAll('add-to-calendar-button');
  for (const instance of instances) observer.observe(instance);
</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"
  startDate="2024-11-22"
  endDate="2024-11-22"
  startTime="10:15"
  endTime="23:30"
  timeZone="Europe/Berlin"
  language="de"
></add-to-calendar-button>