Wie man den Add to Calendar Button unter React installiert

Seit React 19 werden Web Components vollständig out-of-the-box unterstützt - ganz ohne Wrapper oder Workarounds. Nutze den Add to Calendar Button Web Component einfach direkt in deinem JSX.

Wir beschreiben nachfolgend alle Optionen.

Schritt 1: npm Installation

Installiere das Package über die npm Registry.

npm install add-to-calendar-button

Schritt 2: Import

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

import 'add-to-calendar-button';

Schritt 3: Loslegen

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

Mit React 19 lassen sich Custom-Element-Properties über TypeScripts Custom-Elements-Support typisieren. Registriere den Element-Typ einmalig (z.B. in einer global.d.ts), um vollständiges Type-Checking zu erhalten:

import type {
  AddToCalendarButtonType,
} from 'add-to-calendar-button';
import type {
  DetailedHTMLProps,
  HTMLAttributes,
} from 'react';

declare module 'react' {
  namespace JSX {
    interface IntrinsicElements {
      'add-to-calendar-button': DetailedHTMLProps<
        Omit<HTMLAttributes<HTMLElement>, keyof AddToCalendarButtonType>,
        HTMLElement
      > &
        AddToCalendarButtonType;
    }
  }
}

export {};

Falls compilerOptions.types in deiner tsconfig gesetzt ist, ergänze react und react-dom neben den bereits vorhandenen Einträgen:

{
  "compilerOptions": {
    "types": ["vite/client", "react", "react-dom"]
  }
}

Dein Code kann hierbei bspw. wie folgt aussehen.

<add-to-calendar-button
  name="Titel"
  options="'apple','google'"
  location="World Wide Web"
  start-date="2026-09-10"
  end-date="2026-09-10"
  start-time="10:15"
  end-time="23:30"
  time-zone="Europe/Berlin"
  language="de"
></add-to-calendar-button>

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

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.