Live Coding : Utilisation de FullCalendar

Temps de lecture : 24 minutes environ.

Il existe de nombreux cas dans lesquels l'ajout d'un calendrier s'avère utile voire nécessaire sur un site.

Nous traiterons dans cet article l'utilisation d'une bibliothèque Javascript qui permet de le faire de façon simple.

Cette bibliothèque s'appelle FullCalendar.

Installer FullCalendar

Afin de pouvoir utiliser la bibliothèque, il sera nécessaire de l'installer dans notre projet.

Il y a plusieurs méthodes proposées sur le site officiel, vous choisirez celle qui vous conviendra le mieux. Nous allons, dans cet article, télécharger les packages et installer ceux qui nous intéresseront.

Pour commencer, nous allons aller sur la page "Getting Started" du site officiel de FullCalendar et télécharger le package dans la section "Download"

Une fois ce package téléchargé, nous allons l'extraire dans le dossier de notre choix et intégrer certains composants à notre projet.

Par défaut, nous avons les composants suivants (dans le dossier packages) :

  • bootstrap : thème du calendrier pour bootstrap 4
  • core : le composant principal, à charger dans tous les cas
  • daygrid : fournit des grilles quotidiennes
  • google-calendar : permet de charger les évènements depuis un calendrier google public
  • interaction : ajoute les intéractions
  • list : permet d'afficher une liste d'évènements
  • luxon : permet d'utiliser la bibliothèque Luxon qui apporte des mises en forme de dates avancées
  • moment : permet d'utiliser la bibliothèque Moment qui apporte des améliorations dans la manipulation des dates
  • moment-timezone : permet d'utiliser des noms pour les fuseaux horaires
  • rrule : permet d'implémenter des évènements récurrents
  • timegrid : permet d'avoir des grilles avec horaires

Comme indiqué ci-dessus, le composant "core" est obligatoire.

Tous les composants sont structurés de la même manière avec un fichier "main.css" pour le css et un fichier "main.js" pour le javascript.

Dans un premier temps, nous allons créer un dossier "fullcalendar" dans notre projet et y copier le dossier "core". Cependant, à lui seul, il n'affichera rien. Nous aurons besoin de l'un des composants qui afficheront une vue de calendrier. Prenons donc "daygrid" également.

Nous devrons donc appeler les fichiers css de "core" et "daygrid" dans notre "<head>" et nous appellerons également les fichiers javascript juste avant "</body>"

<!-- Lignes à inclure dans <head> -->

<link rel="stylesheet" href="fullcalendar/core/main.css">

<link rel="stylesheet" href="fullcalendar/daygrid/main.css">
<!-- Fichiers JS à insérer avant </body> -->

<script src="fullcalendar/core/main.js"></script>

<script src="fullcalendar/daygrid/main.js"></script>

Appeler FullCalendar

Maintenant que FullCalendar est installé, nous allons l'appeler afin de l'activer.

Nous devons prévoir plusieurs choses, à commencer par un endroit où l'afficher.

Ainsi, nous allons créer une balise "<div>" qui accueillera le calendrier

<div id="calendrier"></div>

Ensuite, dans un fichier "scripts.js" que nous aurons pris soin d'appeler également, nous allons instancier le calendrier au moyen des lignes suivantes

window.onload = () => {

    // On va chercher la div dans le HTML

    let calendarEl = document.getElementById('calendrier');



    // On instancie le calendrier

    let calendar = new FullCalendar.Calendar(calendarEl, {

        // On charge le composant "dayGrid"

        plugins: [ 'dayGrid' ],

    });



    // On affiche le calendrier

    calendar.render();

}

Personnaliser FullCalendar

Bien sûr, il nous sera nécessaire de personnaliser un peu l'affichage de notre calendrier en fonction de nos besoins, en ajoutant des vues, des boutons et des intéractions, par exemple.

Ajouter des vues

Actuellement, notre calendrier affiche des vues mensuelles ou quotidiennes grâce au composant "dayGrid", mais on ne peut pas changer de vue.

Imaginons que la vue que nous souhaitons avoir par défaut soit une vue d'une semaine, nous allons ajouter l'option ci-dessous

defaultView: 'dayGridWeek'

Si nous souhaitons juste voir une journée, nous mettrons plutôt ceci

defaultView: 'dayGridDay'

Mais si nous souhaitons pouvoir changer de vue, passer du mois à la semaine ou à la journée, nous aurons besoin de personnaliser les boutons, ceci est traité dans la partie suivante.

Si, maintenant nous souhaitons ajouter des vues, comme la vue en liste ou les vues avec les horaires, nous aurons besoin d'ajouter de nouveaux composants.

Prenons l'exemple de la liste. Pour ajouter ce composant, il faudra suivre ces différentes étapes

Nous devrons appeler le fichier css de "list" dans notre "<head>" et nous appellerons également le fichier javascript juste avant "</body>"

<!-- Lignes à inclure dans <head> -->

<link rel="stylesheet" href="fullcalendar/core/main.css">

<link rel="stylesheet" href="fullcalendar/daygrid/main.css">

<link rel="stylesheet" href="fullcalendar/list/main.css">
<!-- Fichiers JS à insérer avant </body> -->

<script src="fullcalendar/core/main.js"></script>

<script src="fullcalendar/daygrid/main.js"></script>

<script src="fullcalendar/list/main.js"></script>

Puis nous ajoutons le composant "list" à la liste des composants à charger

plugins: [ 'dayGrid', 'list' ],

Et enfin, nous pouvons charger cette vue

defaultView: 'listMonth'

Modifier les boutons supérieurs

Pour pouvoir gérer notre calendrier, afficher les options peut être utile, et intéressant pour les visiteurs.

Pour ce faire, nous utiliserons le code suivant

header: {

    left: 'prev,next today',

    center: 'title',

    right: 'dayGridMonth,dayGridWeek,listMonth'

}

Dans ce header, nous avons 3 sections (left, center et right) qui permettent de définir ce que nous souhaitons afficher.

Les valeurs séparées par des virgules seront collées ensemble, les valeurs séparées par des espaces seront séparées.

Modifier la langue

Si vous souhaitez modifier la langue de votre calendrier, ajoutez la ligne ci-dessous

locale: 'fr'

Cette ligne modifie uniquement l'affichage des dates. Pour personnaliser les options, ajoutez également ceci

buttonText: {

    today:    'Aujourd\'hui',

    month:    'Mois',

    week:     'Semaine',

    day:      'Jour',

    list:     'Liste'

}

Ajouter des évènements

L'objectif d'avoir un calendrier est de pouvoir y afficher des évènements.

Ces évènements peuvent être ajoutés de plusieurs façons (liste non exhaustive) :

  • Directement dans le code JS
  • Par ajout en php dans le code js
  • En appel ajax vers un serveur

Nous allons commencer par la 1ère méthode, en ajout direct dans le code JS.

Commençons par déclarer une variable globale "evenements" qui contiendra deux évènements.

let evenements = [{

    "title":"Live Coding - démo",

    "start":"2019-11-23 14:00:00",

    "end":"2019-11-23 16:00:00"},

{

    "title":"Live Coding - démo",

    "start":"2019-11-30 14:00:00",

    "end":"2019-11-30 16:00:00"

}];

Nous pourrons ensuite ajouter les évènements en incluant l'option suivante

events: evenements

Pour ajouter des évènements en ajax, il faudra interroger un serveur distant et traiter sa réponse, qui devra être structurée avec les propriétés demandées par FullCalendar.

Cette partie est détaillée dans la vidéo.

Ajouter l'interaction

Il peut également être nécessaire d'ajouter des intéractions avec les évènements. Pour commencer, nous devons ajouter le composant "interaction".

Nous devrons appeler le fichier css de "interaction" dans notre "<head>" et nous appellerons également le fichier javascript juste avant "</body>"

<!-- Lignes à inclure dans <head> -->

<link rel="stylesheet" href="fullcalendar/core/main.css">

<link rel="stylesheet" href="fullcalendar/daygrid/main.css">

<link rel="stylesheet" href="fullcalendar/list/main.css">

<link rel="stylesheet" href="fullcalendar/interaction/main.css">
<!-- Fichiers JS à insérer avant </body> -->

<script src="fullcalendar/core/main.js"></script>

<script src="fullcalendar/daygrid/main.js"></script>

<script src="fullcalendar/list/main.js"></script>

<script src="fullcalendar/interaction/main.js"></script>

Puis nous ajoutons le composant "interaction" à la liste des composants à charger

plugins: [ 'dayGrid', 'list', 'interaction' ],

Nous pouvons maintenant ajouter l'option suivante

editable: true

Celle-ci permet de déplacer et modifier les évènements.

Nous pouvons bien sûr effectuer des actions diverses. Par exemple, si nous souhaitons mettre à jour notre base de données lorsque l'évènement est déplacé, nous allons ajouter un écouteur sur l'évènement "eventDrop" comme ceci

eventDrop: (info) => {

    alert("on a lâché l'évènement sur "+ info.event.start)

}

Notre variable "info" est un objet qui contiendra toutes les informations sur l'évènement. Il sera alors possible d'envoyer ces nouvelles informations en base de données.

Nous pouvons également modifier la durée de l'évènement en modifiant son heure de fin d'un simple drag/drop.

On interceptera l'évènement "eventResize" de la même façon que précédemment

eventResize: (info) => {

    alert("on a mis l'heure de fin sur "+ info.event.end)

}

Voilà qui termine ce tutoriel, vous pouvez approfondir en lisant la documentation officielle de FullCalendar.

Obtenir de l'aide

Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat

Live Coding : Utilisation de FullCalendar
Article publié le - Modifié le

Catégories : Javascript Tutoriel Live-Coding fullcalendar

Mots-clés : Tutoriel Javascript Live-Coding FullCalendar livecoding

Partager : Partager sur Facebook Partager sur Twitter Partager sur LinkedIn