Pour pratiquer les dates en JavaScript je vous propose de créer un calendrier permettant d'afficher des évènements sur un mois.
Sommaire
00:00 Principe général
04:27 Structure de base
09:30 Calcul du point de début / fin
16:30 Affichage des jours de la semaine
20:07 Affichage des jours
27:54 Affichage des évènements simples
36:45 Style CSS
42:04 Évènement sur plusieurs jours
51:40 Décaler les évènements
Énoncé
Le client exige que plusieurs comportements soient présent pour considérer le composant comme valide (des tests sont disponibles pour confirmer ces comportements)
- On doit pouvoir afficher des évènements sur plusieurs jours
- On peut afficher des évènements qui ont lieu a une heure précise
- On ne souhaite pas utiliser de librairie comme fullcalendar car on veut avoir la main sur les évolutions.
Pour commencer à travailler sur le projet vous pouvez récupérer la liste des évènements à l'aide de ce fichier.
Étapes
Pour vous aider à effectuer cet exercice, je vous propose quelques étapes intermédiaires.
Étape 1 : Jours du mois
La première étape consiste à générer un tableau contenant les jours du mois. Pour cela on va devoir créer plusieurs fonctions :
startOfMonth, permettra d'obtenir le premier jour du mois.startOfWeek, pour trouver le début de la semaine (et le premier jour de notre calendrier).endOfMonth, permettra d'obtenir le dernier jour du moisendOfWeek, pour trouver la fin de la semaine (et ainsi le dernier jour de notre calendrier)datesBetween(start, end), permettra de trouver toutes les dates entre 2 dates. En l'utilisant avec la date de début et la date de fin on pourra obtenir la liste des jours à afficher dans notre calendrier.
Une fois que l'on a cette fonction on pourra générer un tableau HTML qui présentera les jours d'un mois.
Étape 2 : Évènements par jour
La seconde étape va être de créer une structure de donnée contenant les évènements regroupées par jours. L'objectif est de pouvoir ensuite facilement retrouver les évènements qui sont présent un jour particulier.
Attention, si un évènement est sur plusieurs jours, il sera présent plusieurs fois dans (associé à plusieurs clefs).
Étape 3 : Afficher les évènements simple
Avec les évènements indexés par jour vous pouvez ajouter l'affichage des évènements simple (qui ne sont pas fullDay) lorsque vous construisez les cellules de votre calendrier.
Étape 4 : Évènement sur plusieurs jours
Les évènements sur plusieurs jours sont plus complexes car il vont nécessiter plus de logique.
Pour calculer la largeur à allouer à l'évènement on calculera le nombre de jour entre sa date de début et la date de fin. Si la date de fin de semaine est inférieur à la date de fin de l'évènement, on prendre la fin de semaine en compte. Dans les cellules de notre calendrier si un évènement commence le même jour on l'affichera en lui donnant la largeur calculée. Si on est sur un lundi on affiche les évènements multi jours présents ce jour là (pour gérer le cas des évènements qui se déroulent sur plusieurs semaines).
Étape 5 : Éviter le chevauchement
Enfin le dernier problème à régler est de faire en sorte que les évènements sur plusieurs jours ne se chevauchent pas. Pour cela à chaque fois qu'un évènement est placé on sauvegardera sa position. Lorsqu'on rencontre une fin d'évènement (ou une fin de semaine) on libèrera la position associée. Quand un nouvel évènement est placé on le positionne à la première position disponible.
