Installation: nextjs | Add to Calendar Button

Schritt 1: npm Installation

Da Next.js auf React 19 aufsetzt, werden Web Components vollständig out-of-the-box unterstützt. Nutze den Add to Calendar Button Web Component einfach direkt.

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.

Ganz genau - es ist derart einfach.

Dein Code kann hierbei bspw. wie folgt aussehen.

<add-to-calendar-button
  name="Titel"
  options="'apple','google'"
  location="World Wide Web"
  start-date="2026-10-19"
  end-date="2026-10-19"
  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.

Wenn du das Browser-Skript direkt lädst, werden weitere Styles und Sprachen automatisch bei Bedarf geladen (jeweils wenige KB). Bei gebündelten Integrationen solltest du die benötigten Module wie unten gezeigt explizit registrieren.

Bundling via npm (empfohlen für Frameworks)

Wenn du das Skript bundlest, importiere die benötigten Style- und Sprachmodule vor dem Hauptmodul. So sind sie ohne Netzwerk-Anfrage registriert, bevor das Custom Element übernimmt - auch bei der SSR-Hydration:

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

Um alle Styles oder alle Sprachen in einer Anweisung zu laden, nutze die Aggregat-Module: import 'add-to-calendar-button/styles/all' und import 'add-to-calendar-button/i18n/all'.

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 Rendern. Bei der Hydration behält die Komponente die passenden Styles der Hülle bei, bis der Client-Button vollständig gestylt ist. Siehe den "Server-seitiges Rendern"-Abschnitt auf der Profi-Funktionen-Seite. Server-seitiges Rendern

Ein komplettes Beispiel könnte so aussehen.

// app/components/atcb-client.tsx (client upgrade)
'use client';
import 'add-to-calendar-button/styles/3d';
import 'add-to-calendar-button/i18n/de';
import 'add-to-calendar-button'; // load last

type AtcbClientProps = {
  html: { __html: string };
};

export default function AtcbClient({ html }: AtcbClientProps) {
  return <div dangerouslySetInnerHTML={html} />;
}

// app/page.tsx (server component)
import { atcb_generate_ssr_html } from 'add-to-calendar-button/ssr';
import AtcbClient from './components/atcb-client';

export default function Page() {
  const html = {
    __html: atcb_generate_ssr_html({
      name: 'Reminder to check the add-to-calendar-button demo',
      options: ['Apple', 'Google'],
      location: 'World Wide Web',
      startDate: '2026-10-19',
      endDate: '2026-10-19',
      startTime: '10:15',
      endTime: '23:30',
      timeZone: 'Europe/Berlin',
      buttonStyle: '3d',
      language: 'de',
    }),
  };
  return <AtcbClient html={html} />;
}

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