Wie man den Add to Calendar Button mit Astro nutzt

Schritt 0: Wähle das beste Vorgehen

Du kannst einfach das Add to Calendar Button Skript via CDN laden und so wie in der allgemeinen HTML-Anleitung beschrieben integrieren. Hierbei muss du darauf achten, dass das Ganze nur client-seitig geschieht. Zudem ist dieser Weg nicht ganz ideal.

Wir empfehlen die Nutzung des React-Wrapper npm-Packages, die Erstellung einer benutzerdefinierten JSX-Komponente und die Integration dieser Komponente mit dem Attribut 'client:only="react"'.

Schritt 1: Setup

Erstelle eine neue Komponente

Erstelle eine neue Komponente im components-Verzeichnis deines Astro-Projekts. Nenne diese "AddtoCalendarButton.tsx". Falls du mehrere Buttons nutzen möchtest, kannst du entweder mehrere Komponenten erstellen oder das Ganze über entsprechende Props dynamisch gestalten.

Installiere das React-Wrapper npm-Package

Installiere das Package über die npm Registry.

npm install add-to-calendar-button-react

import { AddToCalendarButton } from 'add-to-calendar-button-react';

Schritt 2: Definiere den Button

Definiere den Button in deiner Komponente. In unserem Beispiel haben wir das Label als Prop definiert, um es dynamisch zu halten.

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

export default function atcb(props: AddToCalendarButtonType) {
  return (
    <AddToCalendarButton
      label={props.label}
      name="Titel"
      options="'Apple','Google'"
      location="World Wide Web"
      startDate="2024-12-23"
      endDate="2024-12-23"
      startTime="10:15"
      endTime="23:30"
      timeZone="Europe/Berlin"
      language="de"
      options="'Apple','Google','iCal','Outlook.com','Yahoo'"
    ></AddToCalendarButton>
  );
}

Schritt 3: Loslegen

Du kannst die Komponente nun überall importieren, wo sie benötigt wird und sie wie jede andere benutzten.

Dein Code kann hierbei bspw. wie folgt aussehen.

---
import AddToCalendarButton from '../components/AddToCalendarButton.tsx';
import Layout from '../layouts/Layout.astro';
---
<Layout>
<AddToCalendarButton client:only="react" label="Woohooo" />
</Layout>

Ganz genau - es ist derart einfach.