Comment installer Add to Calendar Button

Étape 1: Intégration via CDN

Chargez le script en ajoutant la balise suivante dans la section head de votre site.
Le script est chargé sans bloquer la page. Son emplacement exact n’est donc pas critique.

<script src="https://cdn.jsdelivr.net/npm/add-to-calendar-button@3" async defer></script>

Étape 2: 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>

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.

Chargement via CDN (JavaScript natif)

Avec la balise script CDN, les styles et langues à la demande sont récupérés depuis la même origine que le script. Si vous auto-hébergez le script, définissez l’attribut « style-source » sur le répertoire contenant les dossiers styles/ et locales/.

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