React Calendar vs React Scheduler : quelle est la différence

Aujourd'hui, nous allons explorer les différences entre un calendrier React et un composant de planificateur React afin que vous sachiez quand choisir l'un plutôt que l'autre. Nous verrons également comment implémenter quelques exemples du monde réel.

Pendant de nombreuses années, nous avons utilisé des calendriers sous diverses formes. Dans le passé, nous les avions accrochés aux murs pour nous montrer des dates et parfois nous les marquions pour des occasions spéciales. Cependant, les choses ont changé à mesure que les ordinateurs et les smartphones sont devenus plus courants. De nos jours, le concept de calendrier peut être utilisé pour créer une variété d'applications.

La seule chose est qu'il existe différents styles de composants de calendrier avec diverses fonctionnalités. Il peut être déroutant de savoir quelle est la solution la plus appropriée pour votre application. Alors, quelles sont les différences fondamentales entre un calendrier React et un planificateur React ? Examinons ces différences, puis examinons quelques exemples concrets.

React Calendar ou React Scheduler ?

Un composant de calendrier React est un bon choix lorsque vous devez autoriser les utilisateurs à sélectionner une date spécifique, comme si votre application a un champ de formulaire pour la date de naissance ou la date de début de l'employé. Un autre bon exemple serait une application qui permet aux utilisateurs de prendre des rendez-vous. Un utilisateur serait en mesure de sélectionner une date et un créneau horaire spécifiques parmi les options disponibles. Pour des scénarios comme celui-ci, un composant de calendrier est probablement le meilleur choix.

D'un autre côté, un planificateur React peut être utilisé pour afficher un agenda en un coup d'œil ou planifier des événements et des tâches. Ces types de composants peuvent être utilisés pour voir plusieurs agendas à la fois, comme votre horaire de travail et vos plans de garde d'enfants. De plus, ils peuvent fournir un aperçu plus riche de vos tâches, car vous pouvez souvent afficher vos agendas par jour, semaine ou même mois.

Ainsi, un calendrier est plus probablement utilisé pour un calendrier global, tandis qu'un planificateur est utilisé. pour des calendriers/agendas détaillés.

Explorons maintenant quelques exemples réels de la façon dont ces deux types de composants différents peuvent être utilisés, même en examinant une implémentation réelle du code. Les exemples de code complets sont disponibles dans ce dépôt GitHub. Vous pouvez également essayer l'exemple interactif ci-dessous.

Configuration du projet

Avant d'approfondir, configurons un projet React. Pour créer rapidement un échafaudage, vous pouvez utiliser Create React App ou Vite. Pour cette démo, nous allons utiliser Create React App. Vous pouvez créer un projet React en exécutant l'une des commandes ci-dessous dans votre terminal.

npx create-react-app my-kendo-react-calendars
cd mes-kendo-react-calendars
npm start // ou début du fil

Je vais utiliser les composants KendoReact Calendar et Scheduler pour ces démos. Nous devons donc installer quelques packages nécessaires à l'utilisation des composants KendoReact Calendar et Scheduler.

Remarque : KendoReact est une bibliothèque commerciale de composants d'interface utilisateur. vous utilisez les composants dans vos projets React. Vous pouvez obtenir une clé de licence via un essai gratuit ou en possédant une licence commerciale. Pour plus d'informations, vous pouvez vous rendre sur la page KendoReact Licensing.

// npm
npm install @progress/kendo-react-scheduler @progress/kendo-react-popup @progress/kendo-react-dialogs @progress/kendo-react-dateinputs @progress/kendo-react-dropdowns @progress/kendo-react-inputs @progress/kendo-react-buttons @progress/kendo-date-math @progress/kendo-react-form @progress/kendo-react-intl @progress/kendo-drawing @progress/kendo-react-treeview @progress/kendo -react-animation @progress/kendo-react-common @progress/kendo-licensing @progress/kendo-theme-default

Ensuite, remplacez le contenu des fichiers App.js et App.css.

src/App.js

import '@ progress/kendo-theme-default/dist/all.css';  
import "./App.css";  
function App([19659019]) {  
return <div className="App"></ div>;  
}  
  
export default App;

src/App.css

.App {  
max-width: 40rem;  
margin[19659019]: 2rem auto;  
}

C'est tout pour la configuration du projet.

React Calendar

Un composant de calendrier React peut être utilisé lorsque vous devez autoriser les utilisateurs à sélectionner une date spécifique. Un exemple très courant d'utilisation d'un calendrier est la sélection de votre date de naissance. Les utilisateurs doivent pouvoir sélectionner l'année, le mois et le jour de leur naissance.

Cela peut être réalisé en utilisant une simple entrée, mais un composant de calendrier peut offrir une meilleure expérience utilisateur. Cela fonctionnera également mieux sur les appareils à écran tactile, car vous n'avez rien à taper. Au lieu de cela, il vous suffit de cliquer ou de toucher plusieurs fois pour sélectionner la date souhaitée.

Sélection d'une date de naissance

Commençons par implémenter un calendrier simple qui permettra aux utilisateurs de sélectionner leur date de naissance. Nous devrons implémenter le composant Calendar à partir de la bibliothèque @progress/kendo-react-dateinputs. Ci-dessous, vous pouvez voir le code correspondant.

src/components/calendar/PickDateOfBirth.js

import { Calendar } from "@progress /kendo-react-dateinputs";  
import { useState } from "react";  
  
const PickDateOfBirth 19659069]= accessoires => {  
const [date, setDate] = useState[19659019](null);  
  
return (  
<div className="k-my-8 ">  
<div className="k-mb-6 k-font-weight-bold">Date de naissance</div>
  
<Calendrier valeur={date} onChange={e  => setDate(e.value)} />  
<div[19659030]className="k-mt-4">Date sélectionnée: {date ?.toDateString()}</div>  
</div[19659019]>  
);  
};  
  
export default PickDateOfBirth;

Nous en avons un useState pour stocker la date sélectionnée. Nous passons les propriétés value et onChange au composant Calendar pour maintenir l'état synchronisé. Enfin, nous rendons la date sélectionnée sous le composant Calendar. Nous devons également mettre à jour le fichier App.js pour inclure notre composant PickDateOfBirth.

src/App.js

import "@progress/ kendo-theme-default/dist/all.css";  
import "./App.css";  
import PickDateOfBirth from " ./components/calendar/PickDateOfBirth";  
  
fonction App() {  
return (  
<div[196590]className="App">  
<PickDateOfBirth />  
</div>  
);  
}  
  
export default App;

Comme le montre le gif ci-dessous, nous avons un beau calendrier prêt à l'emploi et nous pouvons enregistrer la date sélectionnée par un utilisateur. Cet exemple est très simple, créons donc quelque chose d'un peu plus complexe.

Réserver une leçon de conduite

Le composant Calendrier peut être composé d'autres fonctionnalités pour créer des fonctionnalités plus complexes.

Imaginez que vous souhaitiez réserver un cours de conduite avec votre moniteur. Tout d'abord, vous devez être en mesure de sélectionner le jour où vous souhaitez conduire. Après cela, une liste de créneaux horaires disponibles pour l'instructeur devrait vous être présentée. Enfin, vous devriez pouvoir sélectionner l'un des créneaux horaires. Ci-dessous, vous pouvez voir le code pour implémenter cette fonctionnalité.

src/components/calendar/BookDrivingSlot.js

import { Calendar } from " @progress/kendo-react-dateinputs";  
import { useEffect, useRef, useState } de[19659018]"réagir";  
  
const fois = [  
"08:00 - 10:00",  
"10:00 - 12 :00",  
"12h00 - 14h00",  
"14h00 - 16h00",  
"16h00 - 18h00 ",  
"18:00 - 20:00",  
];  
  
const getRandomNumInRange = (min, max) => {  
retour Math.floor(Math.[19659113]aléatoire() * (max - min) + min);  
};  
  
const pickSlotTimes  = fois => {  

const timesToPick = getRandomNumInRange(0, fois. longueur);  
  

if (timesToPick === times.longueur - 1 ) {  
return times;  
}  
  
let timesPicked = [];[19659219]while (timesToPick !== timesPicked.length - 1) {  

const index = getRandomNumInRange(0, fois.length);  
const[1 9459004] selectedTime = fois[index];  


if (timesPicked.include (selectedTime)) continuer;

timesPicked.push(selectedTime);  
}  
  

return timesPicked.tri([19659019]);  
};  
  
const BookDrivingSlot = accessoires => {  
const [bookingDate, setBookingDate] = useState(null);  
const [selected , setSelectedTimeSlot] = useState(null);  
const [booking349090 ], setBookingTimes] = useState([]);  
const timeSlotCacheRef =  useRef(new Plan());[19659299]useEffect(() => {  

if (!bookingDate) retour[19659019];  
  

let newBookingTimes = timeSlotCacheRef.current.get(
bookingDate.toDateString()  
);  
  

if (!newBookingTimes) {
newBookingTimes = pickSlotTimes(times);

timeSlotCacheRef.current.set(bookingDate.toDateString(),[19459004[] newBookingTime );  
}  
  
setBookingTimes(newBookingTimes);  
}, [bookingDate);  
  
const onDateChange = e => {  
setSelectedTimeSlot(null) ;  
setBookingDate(e.value);  
};  
  
retour ([19659081][div className="k-my-8">  
<div[19659030]className="k-mb-4 k-font-weight-bold">Slot de conduite de livre</div>
  
<div className="k-flex k-display-flex k-mb-4">   
<Calendrier value={bookingDate} onChange={onDateChange][194590} />  
<div className="k-ml-4 k-display-flex k-flex-col ">  
{bookingTimes.map(time => {  
 return (  
<bouton  
clé={time}
className="k-button k-mb-4"
onClick={e => setSelectedTimeSlot(time)}  
>  
{time}  
</bouton>  
);  
})}[19659081]</div>  
</div>
  
{bookingDate && selectedTimeSlot ? (  
<div>
Slot sélectionné : {bookingDate.toDateString()} à {selectedTimeSlot}   
</div>  
) : null}  
</div>[19659037]);  
};  
  
export default BookDrivingSlot;

Résumons le code que nous avons dans le composant BookDrivingSlot. Dans un premier temps, nous définissons une liste de plages horaires possibles disponibles pour la journée. Ceux-ci seront choisis au hasard lorsqu'un utilisateur sélectionne une date dans le calendrier. Les plages horaires proviendraient normalement d'une base de données, mais cela suffira pour notre exemple.

Ensuite, nous avons les fonctions getRandomNumInRange et pickSlotTimes. Le premier est assez explicite, car il renvoie un nombre aléatoire entre le minimum et le maximum passés. Ce dernier fait deux choses. Tout d'abord, il génère un nombre aléatoire qui indiquera combien de créneaux horaires nous aurons pour le jour sélectionné. Par exemple, si le nombre généré est 2, alors il y aura deux plages horaires disponibles pour la journée. Si le nombre généré est le même que le nombre de tranches de temps dans le tableau timesle tableau times est renvoyé.

const timesToPick =[19659024]getRandomNumInRange(0, times.length);  
  

if (timesToPick  === fois.longueur - 1) {  
retour fois;  
}

Sinon, il bouclera jusqu'à ce qu'il trouve le nombre requis de créneaux horaires, puis les renverra triés.

let timesPicked = [];[19659219]while (timesToPick !== timesPicked.length - 1) {  

const index = getRandomNumInRange(0, times.length);  
const selectedTime = fois[index];  


if (timesPicked.comprend(selectedTime)) continue;

timesPicked.push(selectedTime);  
}  
  

return timesPicked.tri([19659019]);

Nous avons quelques valeurs avec état pour stocker la date sélectionnée : des plages horaires disponibles et une plage horaire sélectionnée. En plus de cela, nous avons un timeSlotCacheRef qui est utilisé pour mettre en cache les créneaux horaires pour les dates sélectionnées, nous n'avons donc pas à les recalculer plusieurs fois.

Le useEffect s'exécutera une fois lorsque le composant est monté puis à chaque changement de date de réservation. S'il n'y a pas de date de réservation, nous renflouons. Sinon, nous obtenons des créneaux horaires de réservation à partir du cache ou en choisissons de nouveaux au hasard et mettons à jour le cache.

useEffect(() => {  

if  (!bookingDate) retour;  
  

let newBookingTimes = timeSlotCacheRef.current ].get(
bookingDate.toDateString()  
);  
  

if (!newBookingTimes) {
newBookingTimes = pickSlotTimes(times);

timeSlotCacheRef.current.set(bookingDate.toDateString(),[19459004[] newBookingTime );  
}  
  
setBookingTimes(newBookingTimes);  
}, [bookingDate);

Enfin, le composant affiche le calendrier, les boutons avec les plages horaires disponibles et la date et l'heure sélectionnées.

Maintenant, mettez à jour le fichier App.js pour inclure le BookDrivingSlot.

src/App.js

import "@progress/kendo-theme-default/dist/all.css";  
import ". /App.css";  
import PickDateOfBirth from "./components/calendar/PickDateOfBirth";  
import BookDrivingSlot [194590319659018]"./components/calendar/BookDrivingSlot";  
  
function App() {  
return (  
< div className="App">  
<PickDateOfBirth />  
 <hr className="k-my-8" />  
<BookDrivingSlot />  
</div>  
) ;   
}  
  
export default Application;

Le gif ci-dessous montre la fonctionnalité. Comme vous pouvez le voir, grâce au composant Calendrier KendoReact, nous pouvons implémenter des fonctionnalités utiles assez facilement.

Un composant de calendrier React est un bon choix lorsque vous devez permettre aux utilisateurs de sélectionner une date spécifique. Il peut être utilisé en conjonction avec d'autres composants et éléments pour créer des fonctionnalités plus riches et plus complexes. Ici, nous l'avons combiné avec des boutons de tranche horaire, mais il existe d'autres cas d'utilisation. Par exemple, il peut être utilisé avec des champs de saisie pour créer un sélecteur de date et un sélecteur de plage de dates. Pour voir ce que vous pouvez faire d'autre avec le composant Calendarvous pouvez consulter sa documentation.

React Scheduler

Nous avons couvert des exemples d'utilisation d'un composant de calendrier React. Explorons maintenant l'utilisation d'un composant de planificateur React. Le composant Scheduler proposé par KendoReact, comme son nom l'indique, permet aux utilisateurs de planifier des événements. Il offre de nombreuses fonctionnalités utiles et peut être utilisé pour créer une variété de fonctionnalités. Une bonne comparaison est Google Calendar, qui permet aux utilisateurs de planifier des tâches, des événements et des rappels. D'autres exemples incluent les systèmes de gestion d'événements et de réservations ou les calendriers de réunions de travail.

Pour montrer comment le Planificateur peut être utilisé, nous allons implémenter un planificateur de salle de réunion. Imaginez un grand bureau où il y a beaucoup d'employés, mais seulement trois salles de réunion. Les employés devraient pouvoir réserver une salle à l'avance pour éviter les collisions avec d'autres personnes qui voudraient également se rencontrer et discuter. Commençons par créer le composant RoomScheduler.

src/components/scheduler/RoomScheduler.js

import {
Planificateur,
Vue de la chronologie,
Vue du jour,
Vue de la semaine,
Vue Mois,
AgendaView,  
} de "@progress/kendo-react-scheduler";  
import { useState } de  "react";  
import { guid } from "@progress/kendo-react-common";  
  
 const meetingRooms = {
nom : "Salle de réunion",
données : [  
{
text: "Chambre bleue",
valeur: 1,
couleur: "bleu",  
},  
{
text: "Chambre rouge",
valeur: 2,
couleur: "rouge",  
},  
{
text: "Chambre verte",
valeur: 3,
couleur: "vert",  
},  
],
champ: "RoomID",
valeurChamp: "valeur",
champ de texte: "texte",
colorField: "color",  
};  
  
const compareById = matchingItem => item => matchingItem.id === item.id;  
  
const RoomScheduler = props => {  
const [data, setData] = useState([19659019][]);  
  
const onDataChange = ({ créé, mis à jour supprimé }) => {  

const newItemsWithIds = créé.map(article => ({  
...article,
id: guid(),  
}));  
  
setData(dataState =>
dataState.reduce((acc, item) => {  

if ( supprimé.trouver(comparerById(article))) retour acc;

acc.push(mis à jour.trouver(compareById(item))[19659069]|| article);  
retour acc;  
}, newItemsWithIds)  
)[19659019];  
};  
  
return (  
<div className="k-my-8" >  
<div className="k-mb-4 k-font-weight-bold">Réserver une chambre</div>  
<Planificateur  
modifiable  
data=[19659019]{données}
onDataChange={onDataChange}
ressources={[meetingRooms]}  
>  
<TimelineView / >  
<DayView />  
<WeekView />  
<MonthView />  
<AgendaView />  
</Planificateur>  
</div>   
);  
};  
  
export default RoomScheduler;

Tout d'abord, nous avons défini la variable meetingRoomsqui précisait les détails des salles disponibles dans le bureau. En plus de cela, nous pourrions ajouter plus de champs, tels que par qui la salle a été réservée, les participants et plus encore, mais seules les salles de réunion feront l'affaire pour cet exemple.

Le composant KendoReact Scheduler propose cinq vues par défaut :

• Timeline[19659769]Jour
• Semaine
• Mois
• Agenda

Il n'est pas nécessaire de les utiliser tous à la fois. Nous pourrions simplement utiliser les vues du jour, de la semaine et du mois, ou les deux autres.

Chaque fois que les données sont modifiées par l'utilisateur, le gestionnaire reçoit un objet avec des propriétés, telles que createdmis à jour et supprimé. Ces éléments stockent les éléments qui ont été modifiés. Ainsi, dans le gestionnaire onDataChangenous ajoutons un ID unique pour les éléments créés, puis nous mettons à jour ou supprimons le reste des éléments, le cas échéant.

Dernier mais Enfin, ajoutez le composant RoomScheduler dans le fichier App.js.

src/App.js

import "@progress/kendo- theme-default/dist/all.css";  
import "./App.css";  
import PickDateOfBirth from "./ composants/calendar/PickDateOfBirth" ;  
import BookDrivingSlot from "./components/calendar/BookDrivingSlot";  
import RoomScheduler  RoomSlot  "./components/scheduler/RoomScheduler";  
function App() {  
return (  
<div className="App">  
<PickDateOfBirth />  
<hr className=[19659019]"k-my-8" />  
<BookDrivingSlot />  
<hr  className="k-my-8" />  
<RoomScheduler />  
</div>  
);  
}  
  
export default App;

Ci-dessous, vous pouvez voir le composant du planificateur en action.

Il y a beaucoup plus de fonctionnalités disponibles que ce qui est présenté dans cet exemple simple, alors n'hésitez pas la documentation KendoReact Scheduler.

Wrap-up

Nous l'avons. Nous avons couvert les différences fondamentales entre un calendrier React et un composant de planificateur React. Comme vous l'avez vu, le composant de calendrier React peut être utilisé pour implémenter des fonctionnalités permettant aux utilisateurs de sélectionner des dates spécifiques. D'un autre côté, le planificateur React est un bon choix pour la planification de réunions ou les applications de type agenda.

Si vous ajoutez de tels composants à votre propre application, je vous recommande de vérifier en utilisant des composants tiers. It’s not an easy feat to implement well-working calendar and scheduler components, so using ready-made solutions like the ones found in KendoReact is a good idea, as you get nice-looking and feature-rich components out of the box. What’s more, both components provide support for dealing with time zones, localization and internationalization, so they can save you a lot of time and effort.