Si vous organisez des réunions, des conférences téléphones ou des grosses teufs avec champagne et cluster de covid, il est pratique de pouvoir proposer à vos invités d’ajouter cet événement dans leur calendrier. Pour cela, aujourd’hui je vous propose un script qui s’appelle Add To Calendar Button. Il s’agit tout simplement d’un petit bout de JavaScript qui une fois paramétré et inséré dans vos pages web ressemblera à ceci :
Le code de ce script fonctionnera sur desktop et mobile et peut être entièrement paramétré et traduit comme bon vous semble. Il permet d’ajouter une invitation dans les calendriers les plus connus (Google Calendar, Yahoo Calendar, Microsoft 365 et Outlook calendar sans oublier la génération de fichiers iCal / ICS pour les autres calendriers comme celui d’Apple.
Pour mettre en place ce bout de code, téléchargez-le depuis le dépôt Github. Ensuite, copiez les fichiers présents dans le dossier assets sur votre site, puis intégrez ces fichiers à votre page comme ceci :
<link rel="stylesheet" href="./assets/css/atcb.min.css">
<script src="./assets/js/atcb.min.js" defer></script>
Puis créez un bouton comme ceci :
<div class="atcb" style="display:none;">
{
"name":Le titre de l'événement",
"startDate":"02-21-2022",
"endDate":"03-24-2022",
"options":[
"Google"
]
}
</div>
On a la une configuration minimale, mais sachez que vous pouvez ajouter beaucoup plus d’options comme ceci :
<div class="atcb" style="display:none;">
{
"name":"Le titre de votre événement",
"description":"Une petite description",
"startDate":"02-21-2022",
"endDate":"03-24-2022",
"startTime":"10:13",
"endTime":"17:57",
"location":"Roubaix",
"label":"Ajouter au calendrier",
"options":[
"Apple",
"Google",
"iCal",
"Microsoft365",
"Outlook.com",
"Yahoo"
],
"timeZone":"Europe/Berlin",
"timeZoneOffset":"+01:00",
"trigger":"click",
"iCalFileName":"Reminder-Event"
}
</div>
Je vous invite vraiment à lire la documentation pour intégrer facilement ce genre de petit bouton.