Il peut être très pratique à l’utilisateur de cliquer un lien qui inscrive directement un évènement sur son agenda.

Ajouter en un clic un événement sur le calendrier du visiteur améliore considérablement l’expérience utilisateur et augmente significativement le taux de participation. Les utilisateurs n’utilisent toutefois pas tous le même calendrier : Google Agenda, Apple Calendar (iPhone/Mac), Outlook, Yahoo Calendar… Il faut donc proposer plusieurs options pour optimiser les chances d’enregistrement de l’événement.

BEGIN:VCALENDAR
VERSION:2.0
PRODID:-//MonSite//MonApp//FR
BEGIN:VEVENT
UID:event-unique-id-12345@monsite.com
DTSTART:20221209T190000Z
DTEND:20221209T220000Z
SUMMARY:Conférence Web Design
DESCRIPTION:Découvrez les dernières tendances du design web
LOCATION:2 Bd Jules Verne, 44000 Nantes, France
END:VEVENT
END:VCALENDAR

<a href="/events/conference-web-design.ics" download>
  📅 Télécharger l'événement (.ics)
</a>

Google Agenda : lien direct sans téléchargement

Pour ajouter un événement au Google Agenda de l’utilisateur, il suffit de lui proposer un lien. Celui-ci ouvre directement l’interface d’ajout d’événement.

L’url commence de façon immuable par :

https://www.google.com/calendar/render?action=TEMPLATE

On ajoute ensuite les éléments

&text=Titre de l’événement
L’attribut ‘text‘ contient le titre de l’événement, qui apparaitra en évidence sur l’agenda. Le nombre de caractères semble illimité, mais il est préférable, pour la lisibilité, de ne pas dépasser les 40 caractères. On peut laisser les espaces, Google les remplacera lui-même par ses fameux %20

&dates=20251209T190000Z/20251209T220000Z
L’attribut ‘date‘ contient les dates et heures de l’événement, début et fin, selon une nomenclature très précise : AAAAMMJJ suivi d’un T suivi de HHMMSS suivi d’un Z. Les date et heure du début sont séparées des date et heure de fin par un slash /

&ctz=Europe/Paris
L’attribut ‘ctz‘ contient de fuseau horaire. Pour la France, inscrire ‘Europe/Paris‘. Il arrive toutefois que le fuseau horaire ne soit pas respecté. Bien vérifier le résultat.

&details=Détails de l’événement
L’attribut ‘detail‘ contient le descriptif de l’événement. C’est un champ texte où l’on peut inclure des espaces et des caractères accentués.

&location=2, boulevard Jules Verne 44000 NANTES
L’attribut ‘location‘ contient l’adresse de l’événement. C’est un champ texte où l’on peut inclure des espaces et des caractères accentués. Idéalement, on peut utiliser la nomenclature proposée par Google Maps.

Exemple complet Google Agenda

<a href="https://www.google.com/calendar/render?action=TEMPLATE&text=Conférence Web Design&dates=20251209T190000Z/20251209T220000Z&ctz=Europe/Paris&details=Découvrez les dernières tendances du design web&location=2 Bd Jules Verne, 44000 Nantes, France" target="_blank" rel="noopener">
  📅 Ajouter à Google Agenda
</a>

Apple Calendar (iPhone, iPad, Mac)

Méthode recommandée : fichier ICS

Apple Calendar ne supporte pas les liens directs comme Google. La méthode recommandée consiste à s’abonner à un calendrier externe via une URL de fichier .ics.

Comment l’utilisateur ajoute l’événement

Sur iPhone/iPad : L’utilisateur doit toucher le lien du fichier .ics, qui ouvrira automatiquement l’app Calendrier avec l’option d’ajouter l’événement.

Sur Mac : L’utilisateur peut choisir Fichier > Nouvel abonnement au calendrier, puis coller l’URL du fichier .ics.

Bouton pour Apple Calendar

<a href="/events/conference-web-design.ics">
  📅 Ajouter à Apple Calendar
</a>

Microsoft Outlook

Option 1 : Fichier ICS (recommandé)

Outlook prend en charge l’importation de fichiers .ics, qui peuvent être ajoutés directement au calendrier.

<a href="/events/conference-web-design.ics">
  📅 Ajouter à Outlook
</a>

Option 2 : Lien d’abonnement webcal

Pour des mises à jour automatiques, Outlook supporte les abonnements via URL. Remplacez https:// par webcal:// dans votre URL :

webcal://monsite.com/events/conference-web-design.ics

Yahoo Calendar

Structure de l’URL Yahoo Calendar

Yahoo propose également un système de lien direct similaire à Google :

URL de base :

https://calendar.yahoo.com/?v=60

Paramètres de l’URL

• &TITLE= : Titre de l’événement
• &ST= : Date et heure de début (format : AAAAMMJJTHHMM00)
• &DUR= : Durée en HHMM (ex: 0300 pour 3 heures)
• &DESC= : Description
• &in_loc= : Lieu

Exemple Yahoo Calendar

https://calendar.yahoo.com/?v=60&TITLE=Conférence+Web+Design&ST=20221209T190000&DUR=0300&DESC=Découvrez+les+dernières+tendances&in_loc=2+Bd+Jules+Verne,+Nantes

Solution complète : proposer tous les calendriers

Approche avec boutons multiples

Offrez à vos visiteurs le choix entre plusieurs calendriers :

<div class="calendar-buttons">
  <a href="https://www.google.com/calendar/render?action=TEMPLATE&text=..." target="_blank">
    📅 Google Agenda
  </a>
  
  <a href="/events/conference.ics" download>
    📅 Apple Calendar
  </a>
  
  <a href="/events/conference.ics">
    📅 Outlook
  </a>
  
  <a href="https://calendar.yahoo.com/?v=60&TITLE=..." target="_blank">
    📅 Yahoo Calendar
  </a>
</div>

Comment détecter quel agenda utilise le visiteur ?

Pour une expérience optimale, vous pouvez détecter le système de l’utilisateur avec du javascript :

function detectCalendar() {
  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
  const isMac = /Mac/.test(navigator.platform);
  const isOutlook = /Outlook/.test(navigator.userAgent);
  
  if (isIOS || isMac) {
    return 'apple';
  } else if (isOutlook) {
    return 'outlook';
  }
  return 'google'; // Par défaut
}