Ajouter un bouton add-to-calendar dans Webflow

Dans un monde de plus en plus axé sur la gestion du temps, offrir une fonctionnalité d'ajout d'événements au calendrier directement depuis votre site web peut être un réel avantage pour vos utilisateurs.

Dans cet article, nous allons explorer comment ajouter facilement un bouton "add to calendar" dans un projet Webflow.

Bouton Add To Calendar sur une page statique

Si vous souhaitez mettre en avant un événement spécial sur une des pages statiques de votre site, un bouton d'ajout au calendrier peut être pratique.

Sans utiliser le CMS de Webflow, nous allons pouvoir ajouter cette fonctionnalité assez facilement.

Étape 1 : Créer une section avec un bouton

La première étape consiste tout simplement à développer une section dans Webflow pour mettre en avant votre événement. Ensuite, dans cette section, vous allez pouvoir ajouter un élément "button" ou "link block" qui permettra d'ajouter l'événement à un calendrier en ligne.

Pro Tip
‍Pour avoir un site accessible, nous vous recommandons fortement d'ajouter les attributs personnalisés suivant à cet élément :

Name : role
Value : button

et

Name : aria-label
Value : ajouter l'événement à un calendrier en ligne

Étape 2 : Ajouter un id au bouton

La deuxième étape de ce tutoriel nécessite d'ajouter un id à notre bouton "add-to-calendar". Pour ce faire, il suffit de se rendre dans les paramètres de l'élément et d'ajouter un texte dans la partie "ID".

Pour garder une cohérence dans notre développement, nous allons donner l'id : "add-calendar-button"

Étape 3 : Intégrer "Add to Calendar Button" via CDN

Pour utiliser la fonctionnalité d'ajout au calendrier, nous devons passer par du code. Heureusement, un outil en ligne nous facilite l'implémentation de cette fonctionnalité : Add to Calendar Button

Pour intégrer la fonctionnalité dans Webflow, il faudra ajouter le script suivant dans la balise <head> de votre page (dans les paramètres de la page) :

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

Étape 4 : Personnaliser les infos de l'événement

Nous allons maintenant ajouter un script qui permettra de faire fonctionner le bouton lorsqu'on clique dessus et de personnaliser les informations de l'événement dans notre calendrier (titre de l'événement, date de début, date de fin, etc.)

Dans la balise "Before </body> tag", nous allons ajouter et personnaliser le script suivant :

<script>
const configdate = {
  name: "",    
  description: "",    
  startDate: "",    
  startTime: "",    
  endDate: "",    
  endTime: "",    
  timeZone: "",    
  organizer: "",    
  location: "",    
  options: ["Google", "iCal", "Apple", "Outlook.com", "Yahoo"],     
  };  
  
const buttondate = document.getElementById('add-calendar-button');  
if (buttondate) {    
  buttondate.addEventListener('click', () => atcb_action(configdate, buttondate));  
}  
</script>

Nous allons pouvoir :

Ajouter le nom de l'événement entre les guillemets de name (par exemple : "awwwards Conference: Toronto")
Ajouter une description de l'événement entre les guillemets de description
Ajouter la date de début et de fin entre les guillemets de startDate et endDate (Attention, le format doit être YYYY-MM-DD; par exemple "2023-05-03")
Ajouter une heure de début et de fin entre les guillemets de startTime et endTime (Attention, le format doit être HH:MM; par exemple "09:00")
Ajouter un fuseau horaire entre les guillemets de timeZone (Vous pouvez utiliser le fuseau horaire que vous souhaitez; par exemple : "America/Toronto" ou utiliser le fuseau horaire en fonction du navigateur de l'utilisateur avec "currentBrowser")
Ajouter des informations sur l'organisateur de l'événement entre les guillemets de organizer (Vous devez ajouter le nom et l'email dans le format suivant name|email; par exemple : "awwwards| rudolph@awwwards.com")
Ajouter une localisation entre les guillemets de location (par exemple : "Toronto")
Personnaliser les options de calendrier en ajoutant ou supprimant des options

Si vous n'avez pas utilisé l'id "add-calendar-button" sur votre bouton, il faudra aussi le remplacer dans cette partie du code : document.getElementById('add-calendar-button').

Vous pouvez bien entendu supprimer les lignes dont vous n'avez pas besoin (par exemple enlever la ligne organizer ou startTime) : Comprendre la configuration en détail

Pour notre exemple, le code serait le suivant :

<script>
const configdate = {
  name: "awwwards Conference: Toronto",    
  description: "Trois jours passionnants avec certains des orateurs les plus influents du secteur, qui nous inspirent, nous enseignent et nous guident face aux nombreux défis et opportunités qui se présentent dans l'avenir du web.",    
  startDate: "2023-05-03",    
  startTime: "09:00",    
  endDate: "2023-05-05",    
  endTime: "17:00",    
  timeZone: "America/Toronto",    
  organizer:"awwwards|rudolph@awwwards.com",    
  location: "Toronto",    
  options: ["Google", "iCal", "Apple", "Outlook.com", "Yahoo"],     
  };  
  
const buttondate = document.getElementById('add-calendar-button');  
if (buttondate) {    
	buttondate.addEventListener('click', () => atcb_action(configdate, buttondate));  
}  
</script>

script de configuration bouton add to calendar webflow

Étape 5 : Publier son projet

Le bouton d'ajout au calendrier ne fonctionnera que sur un site live. Il faudra donc publier votre projet pour tester cette nouvelle fonctionnalité.

Bouton d'ajout au calendrier sur site webflow

Evenement enregistrer sur google calendar

Bouton Add To Calendar sur une page dynamique (avec le CMS Webflow)

Pour une page dynamique, nous allons sensiblement refaire les mêmes étapes que pour une page statique. Cependant, cette fois-ci nous allons ajouter des champs dans le CMS que nous pourrons utiliser dans notre code pour personnaliser les informations en fonction de l'événement.

Les trois premières étapes seront identiques à la configuration pour une page statique (nous vous invitons à lire les étapes plus en détail ci-dessus si vous le souhaitez, mais voici un résumé) :

Étape 1 : Préparer une section avec un bouton

Développer une section qui comporte un button ou link block.

Étape 2 : Ajouter un id au bouton

Il faut ajouter un id au bouton qui va servir d'ajout au calendrier (par exemple : add-calendar-button).

bouton add calendar sur page dynamique avec id

Étape 3 : Intégrer le code "Add to Calendar Button"

Dans la balise <head> de votre page dynamique, il faudra insérer le code suivant :

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

script add to calendar button cms webflow

Étape 4 : Personnaliser sa collection

Dans votre collection (événement par exemple) vous devrez ajouter les champs dont vous avez besoin pour la configuration du bouton :

Un champ "Plain text" pour le nom de l'événement
Un champ "Plain text" pour la description de l'événement
Un champ "Date" pour la date de début de l'événement (avec timepicker si besoin) ou deux champs 'Plain Text' (un pour la date de début et un pour l'heure de début. Il faudra respecter le format YYYY-MM-DD pour la date et HH:MM pour l'heure)
Un champ "Date" pour la date de fin de l'événement (avec timepicker si besoin) ou deux champs 'Plain Text' (un pour la date de fin et un pour l'heure de fin. Il faudra respecter le format YYYY-MM-DD pour la date et HH:MM pour l'heure)
Un champ "Plain text" si vous souhaitez personnaliser le fuseau horaire par événement
etc.

Dans cette partie, c'est à vous d'ajouter les champs que vous souhaitez pour personnaliser le bouton (en apprendre plus sur la configuration du bouton add to calendar)

collection events calendrier ajout webflow

item collection evenements pour bouton add to calendar dynamique

Étape 5 - 1 : Si on utilise des champs "Plain Text" pour les dates & heures

Si vous utilisez des champs plain text pour les dates, le code à ajouter sera plus simple. Tout comme pour les pages statiques, vous pourrez personnaliser le code suivant en fonction de vos besoins :

<script>
const configdate = {
  name: "",    
  description: "",    
  startDate: "",    
  startTime: "",    
  endDate: "",    
  endTime: "",    
  timeZone: "",    
  organizer: "",    
  location: "",    
  options: ["Google", "iCal", "Apple", "Outlook.com", "Yahoo"],     
  };  
  
const buttondate = document.getElementById('add-calendar-button');  
if (buttondate) {    
	buttondate.addEventListener('click', () => atcb_action(configdate, buttondate));  
}  
</script>

Vous n'aurez qu'à sourcer vos données depuis le CMS entre les guillemets de chaque configuration.

script add to calendar bouton dynamique CMS Webflow

Étape 5 - 2 : Si on utilise des champs "Date" pour les dates & heures

Si vous utilisez des champs Date pour les dates de début et de fin (avec les heures), il y aura quelques étapes supplémentaires. En effet, la date et l'heure doivent respecter des formats précis (YYYY-MM-DD pour la date et HH:MM pour l'heure).

Pour ce faire, on va ajouter dans notre section 4 textes :

Un texte pour la date de début
Un texte pour l'heure de début
Un texte pour la date de fin
Un texte pour l'heure de fin

On pourra personnaliser les formats pour coller aux réglementations.

On va donner pour chacun des textes, un id :

Pour date de début : start-date
Pour heure de début : start-time
Pour date de fin : end-date
Pour heure de fin : end-time

On pourra ensuite cacher ces informations (display:none si besoin).

informations date webflow cms item bouton calendrier ajout

On ajoutera dans "Before body tag", le code suivant en sourçant les autres données que date et time depuis le CMS :

<script>
const timeElements = [
  { id: 'end-time', formattedTime: '' },  
  { id: 'start-time', formattedTime: '' }
];

timeElements.forEach((timeElement) => {
  const element = document.getElementById(timeElement.id);  
  const [hour, minute] = element.textContent.split(':');  
  const formattedHour = hour.padStart(2, '0');  
  const formattedMinute = minute.padStart(2, '0');  
  timeElement.formattedTime = `${formattedHour}:${formattedMinute}`;
});

const eventStartDate = document.getElementById('start-date').textContent;
const eventStartTime = timeElements.find((t) => t.id === 'start-time').formattedTime;
const eventEndDate = document.getElementById('end-date').textContent;
const eventEndTime = timeElements.find((t) => t.id === 'end-time').formattedTime;

const configdate = {
  name: "",    
  description: "",    
  startDate: eventStartDate,    
  startTime: eventStartTime,    
  endDate: eventEndDate,    
  endTime: eventEndTime,    
  timeZone: "currentBrowser",    
  organizer: "",    
  location: "",    
  options: ["Google", "iCal", "Apple", "Outlook.com", "Yahoo"],     
  };  

const buttondate = document.getElementById('add-calendar-button');  
if (buttondate) {    
	buttondate.addEventListener('click', () => atcb_action(configdate, buttondate));  
  }  
</script>

Étape 6 : Publier ses pages dynamiques et tester

Pour que le code fonctionne, il faut publier le projet et vous pourrez voir que le bouton fonctionne !

Pour aller plus loin dans la personnalisation, voici le lien de la documentation avancée.

Voilà, vous avez maintenant un bouton "ajouter au calendrier" sur votre site web et les internautes ne manqueront plus aucun de vos événements !

Bonus : Bouton d'ajout au calendrier mystère

N'hésitez pas à lire nos autres articles pour découvrir plus de fonctionnalités à intégrer dans Webflow ou à nous contacter pour vos besoins en développement.