Wie man den Add to Calendar Button unter React installiert

Schritt 0: Wähle eine Lösung

Da React-Projekte sehr vielseitig sein können, gibt es auch mehrere mögliche Wege den Add to Calendar Button passend zu integrieren.

• In eher einfachen Projekten kann das Ganze als Web Component out-of-the-box genutzt werden.
• Alternativ zur nativen Nutzung kann aber auch der offizielle Add to Calendar Button React Wrapper genutzt werden. Dieser beinhaltet eine stärkere TypeScript- und React-Unterstützung.

Wir beschreiben nachfolgend alle Optionen.

Schritt 1: npm Installation

Option A: Web Component

Installiere das Package über die npm Registry.

npm install add-to-calendar-button

Option B: React Wrapper

Falls du den spezialisierteren React-Wrapper nutzt, installierst du stattdessen folgendes Package:

npm install add-to-calendar-button-react

Schritt 2: Import

Option A: Web Component

Importiere das Modul in deine Komponente, in welcher du den Button nutzen möchtest.

import 'add-to-calendar-button';

Option B: React Wrapper

Bei der Implementierung des React Wrappers sieht das Import-Statement etwas anders aus.

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

Schritt 3: Loslegen

Option A: Web Component

Beginne mit der Nutzung, indem du einen <add-to-calendar-button> Tag in deinem HTML-Quellcode einfügst - mit den Optionen als Attribute.

Dein Code kann hierbei bspw. wie folgt aussehen.

<add-to-calendar-button
  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"
></add-to-calendar-button>

Option B: React Wrapper

Wenn du die React-Wrapper-Lösung gewählt hast, spezifierst du einen Button über den Tag <AddtoCalendarButton>. Im Grunde nutzt du damit die importierte React-Komponente anstelle des "Custom Elements" (Web Component).

Dein Code sieht dann eher wie folgt aus:

<AddToCalendarButton
  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"
></AddToCalendarButton>

Beachte, dass du mit der Wrapper-Lösung Arrays als tatsächliche Arrays definieren kannst, während sie bei der Nutzung des Web Components in Strings umgewandelt werden müssen!

Merke dir diese Unterschiede, wenn du weiter nach Beispielen stöberst.
Wir besprechen auf anderen Seiten eher die Web-Component-Lösung, die aber ganz einfach auf den React-Wrapper-Stil umgemünzt werden kann.

Beachte, dass der Button nur client-seitig funktioniert! Nutze 'use client'; entsprechend.