Comment installer Add to Calendar Button avec Astro

Étape 0: Choisir la bonne architecture

Vous pouvez utiliser le Web Component directement là où vous en avez besoin, ou indirectement via un composant tel que add-to-calendar.astro, importé dans la page concernée.

Nous recommandons l’approche directe pour un seul élément. Pour plusieurs éléments, utilisez le composant auxiliaire décrit ci-dessous. En usage direct, ne créez simplement pas ce composant et placez la balise add-to-calendar-button là où elle est nécessaire.

Étape 1: Installer le paquet

Installez le paquet depuis le registre npm.

npm install add-to-calendar-button

Étape 2: Créer le composant

Créez un composant add-to-calendar.astro (généralement dans ./src/components/).

Étape 3: Définir les props

Définissez les props du composant, au minimum la date de début et le nom.

import type { AddToCalendarButtonType } from 'add-to-calendar-button';

interface Props {
  name: AddToCalendarButtonType['name'];
  startDate: AddToCalendarButtonType['startDate'];
  endDate: AddToCalendarButtonType['endDate'];
  startTime: AddToCalendarButtonType['startTime'];
  endTime: AddToCalendarButtonType['endTime'];
  timeZone: AddToCalendarButtonType['timeZone'];
}

const { name, startDate, endDate, startTime, endTime, timeZone } = Astro.props as Props;

Ajouter le script

Ajoutez la balise du Web Component :

<add-to-calendar-button
  name={name}
  start-date={startDate}
  end-date={endDate}
  start-time={startTime}
  end-time={endTime}
  time-zone={timeZone}
  language="fr"
></add-to-calendar-button>

Puis l’import du script :

<script>
  import 'add-to-calendar-button';
</script>

Étape 4: Utilisation

Dans une autre page ou un autre composant, importez-le et utilisez-le. Adaptez le chemin à votre projet.

Votre bloc de code pourrait ressembler à ceci.

---
import AddToCalendarButton from '../components/add-to-calendar.astro';
import Layout from '../layouts/Layout.astro';
---
<Layout>
  <AddToCalendarButton
    name="Titre"
    start-date="2026-10-18"
    end-date="2026-10-18"
    start-time="10:15"
    end-time="23:30"
    time-zone="Europe/Paris"
  language="fr"
  />
</Layout>

Oui, c’est aussi simple que cela.

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.

---
import { atcb_generate_ssr_html } from 'add-to-calendar-button/ssr';

const html = atcb_generate_ssr_html({
  name: 'Reminder to check the add-to-calendar-button demo',
  options: ['Apple', 'Google'],
  location: 'World Wide Web',
  startDate: '2050-06-15',
  startTime: '10:15',
  endTime: '23:30',
  timeZone: 'Europe/Berlin',
  buttonStyle: '3d',
  language: 'de',
});
---
<Fragment set:html={html} />
<script>
  import 'add-to-calendar-button/styles/3d';
import 'add-to-calendar-button/i18n/de';
import 'add-to-calendar-button'; // client-side upgrade; load last
</script>