Guides

Exemples

Les exemples suivants présentent les fonctionnalités les plus intéressantes.
Nous vous recommandons d’expérimenter avec la démo pour découvrir toutes les variantes.

Les boutons Add to Calendar de cette page partagent certains paramètres. Ils utilisent tous les mêmes dates (à l’exception de l’exemple dynamique), le style par défaut et s’adaptent au lightMode du site.

Pour les cas experts plus avancés, consultez la page « Utilisation avancée ».

Exemple 1: Le cas habituel

Il s’agit d’une configuration plus ou moins standard avec tous les types de calendriers disponibles et un fuseau horaire défini.

<add-to-calendar-button
  name="[Rappel] Tester Add to Calendar Button"
  start-date="2026-10-18"
  start-time="10:15"
  end-time="23:30"
  time-zone="Europe/Paris"
  location="World Wide Web"
  description="Découvrez sans doute la façon la plus simple d’intégrer des boutons Add to Calendar à vos projets web :[br]→ [url]https://add-to-calendar-button.com/fr/|Cliquez ici ![/url]"
  options="'apple','google','ical','outlookcom','ms365','msteams','yahoo'"
  light-mode="bodyScheme"
  language="fr"
></add-to-calendar-button>

Exemple 2: Événement sur toute la journée

Pour un événement sur toute la journée, il suffit d’omettre les horaires.
Vous pouvez même omettre le fuseau horaire dans ce cas.

<add-to-calendar-button
  name="[Rappel] Tester Add to Calendar Button"
  start-date="2026-10-18"
  location="World Wide Web"
  description="Découvrez sans doute la façon la plus simple d’intégrer des boutons Add to Calendar à vos projets web :[br]→ [url]https://add-to-calendar-button.com/fr/|Cliquez ici ![/url]"
  options="'apple','google','ical','outlookcom','ms365','msteams','yahoo'"
  light-mode="bodyScheme"
  language="fr"
></add-to-calendar-button>

Exemple 3: Dates dynamiques

Au lieu d’utiliser une date fixe, vous pouvez également employer des dates dynamiques.

Utilisez « today » pour toujours sélectionner le jour courant.
Ajouter un nombre tel que « +7 » après la date (par ex. « 2025-04-18+7 ») ajoute 7 jours. Dans cet exemple, nous combinons les deux pour que l’événement ait toujours lieu dans 2 jours.

À noter : cet exemple génère aussi en arrière-plan les données structurées d’un événement en ligne, car le lieu est une URL.

<add-to-calendar-button
  name="[Rappel] Tester Add to Calendar Button"
  start-date="today+2"
  start-time="10:15"
  end-time="23:30"
  time-zone="Europe/Paris"
  location="https://add-to-calendar-button.com/fr/"
  description="Découvrez sans doute la façon la plus simple d’intégrer des boutons Add to Calendar à vos projets web :[br]→ [url]https://add-to-calendar-button.com/fr/|Cliquez ici ![/url]"
  options="'apple','google','ical','outlookcom','yahoo'"
  light-mode="bodyScheme"
  language="fr"
></add-to-calendar-button>

Exemple 4: Événement récurrent

Vous pouvez définir des événements récurrents à l’aide d’une RRULE.
La règle doit être valide techniquement et logiquement. Tous les types de calendriers ne la prennent pas en charge : les options Yahoo et Outlook.com indiquées (ainsi que Google sous iOS) n’apparaissent donc pas dans cet exemple.

<add-to-calendar-button
  name="[Rappel] Tester Add to Calendar Button"
  start-date="2026-10-18"
  start-time="10:15"
  end-time="23:30"
  time-zone="Europe/Paris"
  location="World Wide Web"
  description="Découvrez sans doute la façon la plus simple d’intégrer des boutons Add to Calendar à vos projets web :[br]→ [url]https://add-to-calendar-button.com/fr/|Cliquez ici ![/url]"
  options="'apple','google','ical','outlookcom','yahoo'"
  recurrence="RRULE:FREQ=WEEKLY;INTERVAL=1;WKST=MO;BYDAY=WE,FR;COUNT=6"
  light-mode="bodyScheme"
  language="fr"
></add-to-calendar-button>

Vous pouvez aussi exprimer la règle de façon plus simple.
Consultez la page « Configuration » pour plus de détails.

<add-to-calendar-button
  name="[Rappel] Tester Add to Calendar Button"
  start-date="2026-10-18"
  start-time="10:15"
  end-time="23:30"
  time-zone="Europe/Paris"
  location="World Wide Web"
  description="Découvrez sans doute la façon la plus simple d’intégrer des boutons Add to Calendar à vos projets web :[br]→ [url]https://add-to-calendar-button.com/fr/|Cliquez ici ![/url]"
  options="'apple','google','ical','outlookcom','yahoo'"
  recurrence="weekly"
  recurrence-interval="1"
  recurrence-count="6"
  recurrence-by-day="WE,FR"
  light-mode="bodyScheme"
  language="fr"
></add-to-calendar-button>

Exemple 5: Événement à plusieurs dates

Un événement peut aussi comporter plusieurs dates non récurrentes.
Par exemple, un atelier composé de 2 parties.

Définissez ces parties comme des objets distincts dans un tableau dates.
Les dates et horaires de chaque partie sont obligatoires. Les valeurs racine remplacent les valeurs individuelles (sauf le nom lorsqu’il existe plusieurs dates : il devient alors le titre de la série).
Les événements sont automatiquement triés selon leur startDate.
Vous pouvez omettre les caractères « [ » et « ] » si nécessaire (par ex. avec le shortcode WordPress).

<add-to-calendar-button
  name="Série d’événements"
  dates='  [
    {
      "name": "Rappel 1/3 pour tester Add to Calendar Button",
      "description": "Première partie du rappel pour tester le script Add to Calendar Button sur [url]https://add-to-calendar-button.com/fr/[/url]",
      "startDate": "today+3",
      "startTime": "10:15",
      "endTime": "23:30"
    },
    {
      "name": "Rappel 3/3 pour tester Add to Calendar Button",
      "description": "Troisième partie du rappel pour tester le script Add to Calendar Button sur [url]https://add-to-calendar-button.com/fr/[/url]",
      "startDate": "today+8",
      "startTime": "09:00",
      "endTime": "19:00"
    },
    {
      "name": "Rappel 2/3 pour tester Add to Calendar Button",
      "description": "Deuxième partie du rappel pour tester le script Add to Calendar Button sur [url]https://add-to-calendar-button.com/fr/[/url]",
      "startDate": "today+5",
      "startTime": "11:30",
      "endTime": "20:00"
    }
  ]'
  time-zone="Europe/Paris"
  location="World Wide Web"
  options="'apple','google','ical','outlookcom','yahoo'"
  light-mode="bodyScheme"
  language="fr"
></add-to-calendar-button>

Exemple 6: Libellé personnalisé

Vous pouvez personnaliser le libellé du bouton ainsi que tous les autres textes.
Dans cet exemple, nous définissons aussi listStyle sur une liste superposée, réduisons légèrement la taille et choisissons un nom de fichier ics personnalisé.

Pour modifier d’autres textes, utilisez l’option « customLabels ». Consultez la page « Configuration » et notre exemple avancé pour plus de détails.

<add-to-calendar-button
  name="[Rappel] Tester Add to Calendar Button"
  start-date="2026-10-18"
  start-time="10:15"
  end-time="23:30"
  time-zone="Europe/Paris"
  location="World Wide Web"
  description="Découvrez sans doute la façon la plus simple d’intégrer des boutons Add to Calendar à vos projets web :[br]→ [url]https://add-to-calendar-button.com/fr/|Cliquez ici ![/url]"
  options="'apple','google','ical','outlookcom','yahoo'"
  label="Enregistrez-moi !"
  ical-file-name="Reminder-Event"
  list-style="overlay"
  size="5"
  light-mode="bodyScheme"
  language="fr"
></add-to-calendar-button>

Exemple 7: Bouton en ligne

Par défaut, le bouton est un élément de type bloc qui ouvre une liste au survol.
Vous pouvez également l’afficher en ligne.

Dans cet exemple, nous avons aussi défini « listStyle » sur « modal », ce qui active automatiquement le déclenchement au clic.

Allez-y! →
<add-to-calendar-button
  name="[Rappel] Tester Add to Calendar Button"
  start-date="2026-10-18"
  start-time="10:15"
  end-time="23:30"
  time-zone="Europe/Paris"
  location="World Wide Web"
  description="Découvrez sans doute la façon la plus simple d’intégrer des boutons Add to Calendar à vos projets web :[br]→ [url]https://add-to-calendar-button.com/fr/|Cliquez ici ![/url]"
  options="'apple','google','ical','outlookcom','yahoo'"
  label="Cliquez fort !"
  inline
  list-style="modal"
  light-mode="bodyScheme"
  language="fr"
></add-to-calendar-button>

Exemple 8: Un seul type de calendrier

Si vous ne définissez qu’un seul type de calendrier, aucune liste n’est créée.
Le bouton devient directement le lien vers le calendrier.

<add-to-calendar-button
  name="[Rappel] Tester Add to Calendar Button"
  start-date="2026-10-18"
  start-time="10:15"
  end-time="23:30"
  time-zone="Europe/Paris"
  description="Découvrez sans doute la façon la plus simple d’intégrer des boutons Add to Calendar à vos projets web :[br]→ [url]https://add-to-calendar-button.com/fr/|Cliquez ici ![/url]"
  options="google"
  light-mode="bodyScheme"
  language="fr"
></add-to-calendar-button>

Exemple 9: Séparer un bouton

L’option « buttonsList » permet de séparer le bouton en plusieurs boutons, un par type de calendrier.

Dans cet exemple, nous utilisons également le style rond et masquons le libellé du bouton.

<add-to-calendar-button
  name="[Rappel] Tester Add to Calendar Button"
  start-date="2026-10-18"
  start-time="10:15"
  end-time="23:30"
  time-zone="Europe/Paris"
  description="Découvrez sans doute la façon la plus simple d’intégrer des boutons Add to Calendar à vos projets web :[br]→ [url]https://add-to-calendar-button.com/fr/|Cliquez ici ![/url]"
  options="'apple','google','ical','outlookcom','yahoo'"
  buttons-list
  hide-text-label-button
  button-style="round"
  light-mode="bodyScheme"
  language="fr"
></add-to-calendar-button>

Testons directement la plupart des options dans notre aire de jeu !

Commencer à jouer

Si vous recherchez des personnalisations audacieuses, explorez la « zone dangereuse ».

Utilisation avancée