Wie man die Buttons und RSVP-Formulare mit Astro nutzt

Schritt 1: npm-Installation

npm install add-to-calendar-button

Schritt 2: Gemeinsame Komponente erstellen

Lege src/components/add-to-calendar.astro an. Die Props stehen im Astro-Frontmatter; das normale <script> lädt das Paket im Browser.

---
import type { AddToCalendarButtonType } from 'add-to-calendar-button';

interface Props {
  prokey: NonNullable<AddToCalendarButtonType['prokey']>;
}

const { prokey } = Astro.props;
---

<add-to-calendar-button prokey={prokey}></add-to-calendar-button>

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

Schritt 3: Komponente verwenden

---
import AddToCalendarButton from '../components/add-to-calendar.astro';
---

<AddToCalendarButton prokey="prokey-deines-events" />

Styles und Sprachen

Das npm-Paket enthält standardmäßig nur den Standard-Style und Englisch. Das Beispiel kombiniert add-to-calendar-button/styles/all mit add-to-calendar-button/i18n/de, was gültig ist: Nutze add-to-calendar-button/styles/3d bei einem festen Style oder add-to-calendar-button/styles/all, wenn die remote verwaltete PRO-Konfiguration ihn ohne Deployment ändern kann. Importiere standardmäßig die konkrete Sprache oder eine 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. Beide /all-Imports vergrößern das Bundle, weil sie alle jeweiligen Dateien enthalten.

Alternativ kannst du Styles und Sprachen dynamisch von jsDelivr laden, indem du style-source="https://cdn.jsdelivr.net/npm/add-to-calendar-button@3/dist/styles/" am Element setzt. Dieselbe Strategie gilt für eigene Trigger; in atcb_action heißt die Option styleSource.

Optional: Serverseitiges Rendering

Das Paket bietet einen separaten SSR-Einstieg für eine vorgerenderte Button-Hülle. Für PRO-Daten nutze die asynchrone Variante auf dem Server. Die vollständige Interaktion und RSVP-Formulare werden weiterhin im Browser initialisiert. Siehe SSR mit PRO und die Button Astro Anleitung.