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 das Start-Date und der Name sein.

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

interface Props {
  name: AddToCalendarButtonType['name'];
  startDate: AddToCalendarButtonType['startDate'];
  endDate: AddToCalendarButtonType['endDate'];
  startTime: AddToCalendarButtonType['startTime'];
  endTime: AddToCalendarButtonType['endTime'];
  timeZone: AddToCalendarButtonType['timeZone'];
}

const { name, startDate, endDate, startTime, endTime, timeZone } = Astro.props as Props;

Füge das Skript hinzu

Füge das Web-Component-Tag hinzu:

<add-to-calendar-button
  name={name}
  start-date={startDate}
  end-date={endDate}
  start-time={startTime}
  end-time={endTime}
  time-zone={timeZone}
  language="de"
></add-to-calendar-button>

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
    name="Titel"
    start-date="2026-09-10"
    end-date="2026-09-10"
    start-time="10:15"
    end-time="23:30"
    time-zone="Europe/Berlin"
  language="de"
  />
</Layout>

Ganz genau - es ist derart einfach.

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.

Jeder weitere Style und jede weitere Sprache lädt automatisch bei Bedarf (jeweils wenige KB), sobald du sie referenzierst - kein manuelles Wiring nötig.

Bundling via npm (empfohlen für Frameworks)

Wenn du das Skript bundlest, importiere die gewünschten Style- und Sprachmodule, damit sie zur Build-Zeit ohne Netzwerk-Anfrage registriert werden. Füge einfach die entsprechenden Import-Anweisungen irgendwo in deiner Entry-Datei (oder der Komponente, die den Button nutzt) hinzu:

import 'add-to-calendar-button/styles/3d';   // any style besides "default"
import 'add-to-calendar-button/i18n/de';       // any language besides English

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

Server Side Rendering (SSR)

Der Button kann zusätzlich eine Hülle auf dem Server vor-rendern - für ein sofortiges, layout-stabiles erstes Zeichnen. Siehe den "Server-seitiges Rendern"-Abschnitt auf der Profi-Funktionen-Seite. Server-seitiges Rendern

Ein komplettes Beispiel könnte so aussehen.

---
// add-to-calendar.astro
import { atcb_generate_ssr_html } from 'add-to-calendar-button/ssr';

const html = atcb_generate_ssr_html({
  name: 'Reminder to check the add-to-calendar-button demo',
  options: ['Apple', 'Google'],
  location: 'World Wide Web',
  startDate: '2050-06-15',
  startTime: '10:15',
  endTime: '23:30',
  timeZone: 'Europe/Berlin',
});
---
<Fragment set:html={html} />
<script>
  import 'add-to-calendar-button'; // client-side upgrade
</script>