Wie man den Add to Calendar Button mit Astro nutzt

Schritt 0: Wähle die richtige Architektur

Du kannst die Web Component direkt dort nutzen, wo du sie brauchst, oder indirekt über eine Komponente (wie z.B. add-to-calendar.astro, die dann auf der jeweiligen Seite importiert wird).

Wir empfehlen den direkten Weg, wenn du nur 1 Element nutzt. Bei mehreren Elementen gehe mit der Helper-Komponente. Nachfolgend beschreiben wir den Weg über die Helper-Komponente. Wenn du es direkt nutzt, erstelle einfach keine Komponente, sondern füge den add-to-calendar-button Tag direkt dort ein, wo du ihn brauchst.

Schritt 1: Installiere das Package

Installiere das Package über die npm Registry.

npm install add-to-calendar-button

Schritt 2: Erstelle die Komponente

Erstelle eine neue Komponente add-to-calendar.astro (üblicherweise unter ./src/components/).

Schritt 3: Definiere die Props

Definiere die Props der Komponente. Dies sollte mindestens der ProKey sein.

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

interface Props {
  prokey: AddToCalendarButtonType['proKey'];
}

const { prokey } = Astro.props as Props;

Füge das Skript hinzu

Füge das Web-Component-Tag hinzu:

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

Gefolgt vom Skript-Import:

<script>
  import 'add-to-calendar-button';
</script>

Schritt 4: Loslegen

Importiere und nutze sie auf jeder anderen Seite (oder Komponente). Passe den Pfad entsprechend deinem Projekt-Setup an.

Dein Code kann hierbei bspw. wie folgt aussehen.

---
import AddToCalendarButton from '../components/add-to-calendar.astro';
import Layout from '../layouts/Layout.astro';
---
<Layout>
  <AddToCalendarButton prokey="prokey-of-your-event" />
</Layout>

Ganz genau - es ist derart einfach.