Installation: nextjs | Add to Calendar Button

Étape 1: Installation npm

Next.js reposant sur React 19, les Web Components sont entièrement pris en charge sans configuration. Utilisez directement le Web Component Add to Calendar Button.

Installez le paquet depuis le registre npm.

npm install add-to-calendar-button

Étape 2: Importation

Importez le module dans le composant où vous souhaitez utiliser le bouton.

import 'add-to-calendar-button';

Étape 3: Utilisation

Commencez par ajouter une balise <add-to-calendar-button> à votre code HTML, avec les options sous forme d’attributs.

Oui, c’est aussi simple que cela.

Votre bloc de code pourrait ressembler à ceci.

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

Notez que le bouton ne fonctionne que côté client ! Ajoutez 'use client'; lorsque nécessaire.

Styles et langues

Le script inclut le style de bouton « default » et le pack anglais : le bouton est donc immédiatement fonctionnel et agréable sans configuration supplémentaire.

Lorsque vous chargez directement le script navigateur, les autres styles et langues sont chargés automatiquement à la demande (quelques Ko chacun). Les intégrations groupées doivent enregistrer explicitement les modules requis comme ci-dessous.

Bundling via npm (recommandé pour les frameworks)

Lors du bundling, importez les modules de style et de langue requis avant le module principal. Ils sont ainsi enregistrés sans requête avant la mise à niveau du custom element, y compris pendant l’hydratation SSR :

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

Pour charger tous les styles ou toutes les langues en une seule instruction, utilisez les modules agrégés : import 'add-to-calendar-button/styles/all' et import 'add-to-calendar-button/i18n/all'.

Consultez les options « button-style » et « language » sur la page Configuration pour tous les détails.

Server Side Rendering (SSR)

Le bouton peut aussi pré-rendre une enveloppe sur le serveur pour un premier affichage instantané et stable. Pendant l’hydratation, le composant conserve les styles correspondants jusqu’à ce que le bouton client soit entièrement stylé. Consultez la section « Rendu côté serveur » de la page d’utilisation avancée. Rendu côté serveur

Un exemple complet pourrait ressembler à ceci.

// 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-18',
      endDate: '2026-10-18',
      startTime: '10:15',
      endTime: '23:30',
      timeZone: 'Europe/Berlin',
      buttonStyle: '3d',
      language: 'de',
    }),
  };
  return <AtcbClient html={html} />;
}

Comment installer Add to Calendar Button avec Next.js