En poursuivant votre navigation sur ce site, vous acceptez l’utilisation de cookies pour réaliser des statistiques de visites. X

Contact

N'hésitez pas si vous avez une questions, une idée ou tout à autres choses à nous dire ! Vous pouvez également directement nous envoyer un mail à contact@lilleweb.fr.

J’ai récemment été confronté au problème de la gestion d’un calendrier complexe en JS. Par calendrier complexe, j’entends la possibilité de pouvoir afficher un calendrier complet sous plusieurs formats (mois, semaine, jour) contenant des événements avec lesquels l’utilisateur pourrait interagir : cliquer dessus pour avoir plus de détails et pouvoir s’y inscrire par exemple. J’avais également le besoin de gérer plusieurs sources de données dont Google Calendar, d’avoir des réglages assez fins et la possibilité de le personnaliser visuellement pour qu’il soit cohérent avec le reste du site.

J’avais ce besoin lors du développement du site Latinva France pour le module de réservation.

Pendant mes recherches, je suis donc tombé sur fullCalendar. Au premier abord, ce module javascript utilisant moment correspondait exactement à mes besoins. Petit retour d’expériences

Forces de fullCalendar

Le point fort de fullCalendar est son exhaustivité. Explorons quelques unes de ses possibilités :

Sources

Le calendrier peut être alimenté par de nombreuses sources : Google Calendrier, flux json, url, tableau d’objets. Il mêle également la possibilité d’importer plusieurs sources de données pour un même calendrier. Sur Latinva France j’importais par exemple les données depuis un calendrier Google (très facile à mettre en place, la procédure est expliquée dans la doc) puis depuis une API que je fournissais en node.js qui me renvoyait juste un flux JSON.

Paramètres

Le calendrier peut être configuré très finement. Voici une liste de quelques unes de ses possibilités :

  • Affichage par jours, semaine, mois avec la possibilité de laisser à l’utilisateur le choix.
  • Cacher certains jours de la semaine
  • Multilangues (et possibilité de changer soi-même facilement le wording)
  • Récupérer le click d’un événement et toutes les datas associées à cet événement (exemple, au clic sur un événement on ouvre une popin contenant plus d’infos et la possibilité de s’y inscrire)

Personnalisation

Visuellement, le calendrier peut être également personnalisé même s’il y a certaines limites. Dans les options, il est très facile de gérer chaque couleur du calendrier. Il est par contre plus difficile de réellement redesigner le calendrier car tout est géré sous forme de table et parfois avec du style inline …

Voici un exemple de calendrier peu personnalisé :

Exemple calendrier js fullcalendar

Moment

fullCalendar intègre moment. Si vous ne connaissez pas encore ce fabuleux plug-in JS c’est l’heure de foncer sur leur site pour en apprendre plus. En quelques mots, moment vous permet de gérer de façon beaucoup plus simple les dates et les heures en Javascript : différence, ajout, comparaison, timezone, ect.

Je ferai sûrement quelques articles pour montrer ce que l’on peut faire avec moment.

Il est également utile de préciser que fullCalendar a besoin de jQuery pour fonctionner.

Johnathan MEUNIER Johnathan MEUNIER Profil Github de Johnathan MEUNIER

Ingénieur logiciel Full Stack JS chez AXA, Johnathan est passionné de web depuis plusieurs années. Spécialisé en JavaScript, il est ouvert à toutes les technos tant qu'elles apportent un plus à la communauté.
Il vous donnera aussi son avis sur l'actu High-Tech.

comments powered by Disqus

Partager