Wie man den Add to Calendar Button mit Next.js nutzt

Schritt 1: npm Installation

Da Nextjs nicht optimal mit Web Components harmoniert, empfehlen wir die Nutzung des offiziellen Add to Calendar Button React Wrappers anstelle des Standard Web Components.

Dieser Wrapper behandelt die meisten potentiellen Probleme und Schwierigkeiten automatisch.

npm install add-to-calendar-button-react

Schritt 2: Import

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

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

Schritt 3: Loslegen

Beginne mit der Nutzung, indem du einen <AddtoCalendarButton> Tag in deinem Quellcode einfügst.

Ganz genau - es ist derart einfach.

Dein Code kann hierbei bspw. wie folgt aussehen.

<AddToCalendarButton
  name="Titel"
  options={['Apple','Google']}
  location="World Wide Web"
  startDate="2024-11-22"
  endDate="2024-11-22"
  startTime="10:15"
  endTime="23:30"
  timeZone="Europe/Berlin"
  language="de"
></AddToCalendarButton>

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