Comment implémenter le composant Scheduler dans votre application React

Découvrez comment le composant KendoReact Scheduler offre une solution intuitive et flexible pour créer des plannings bien organisés dans nos applications React.

La gestion des événements et la gestion efficace du temps sont des éléments essentiels pour toute application traitant des rendez-vous, des réunions ou des délais. Cependant, créer cette fonctionnalité à partir de zéro peut être une tâche ardue, nécessitant le travail nécessaire pour faire apparaître divers composants tels que les vues de calendrier, les interfaces d’interaction utilisateur et la synchronisation avec des sources de données externes.

C’est là que le progrès KendoRéagirLe composant Scheduler de entre en jeu. Ceci Planificateur de réaction Le composant offre une solution intuitive et flexible pour créer des plannings bien organisés dans nos applications React. Dans cet article, nous passerons du temps à explorer les fonctionnalités clés du composant KendoReact Scheduler et comment elles peuvent nous aider à créer facilement des interfaces de planification personnalisables.

Le composant du planificateur KendoReact

Le composant KendoReact Scheduler est distribué via le planificateur-kendo-react Package NPM et peut être importé directement à partir de ce package. Lors de l’installation du package de composants du planificateur, il est nécessaire d’installer tous les packages/dépendances de support qui seront potentiellement utilisés dans les éléments de l’interface utilisateur du planificateur afin que le planificateur se charge et fonctionne correctement.

npm install --save @progress/kendo-react-scheduler @progress/kendo-react-intl @progres/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-licensing @progress/kendo-svg-icons

Une fois que nous avons installé les packages nécessaires, nous pouvons commencer à intégrer les composants Scheduler dans notre projet. Avant de faire cela, nous allons d’abord créer un events-utc.js fichier qui contiendra les données des événements que nous souhaitons afficher dans notre planificateur.

const baseData = [
  {
    TaskID: 4,
    OwnerID: 2,
    Title: "Bowling tournament",
    Start: "2023-06-24T16:00:00.000Z",
    End: "2023-06-24T19:00:00.000Z",
    isAllDay: false,
  },
  {
    TaskID: 5,
    OwnerID: 2,
    Title: "Take the dog to the vet",
    Start: "2023-06-24T12:00:00.000Z",
    End: "2023-06-24T13:00:00.000Z",
    isAllDay: false,
  },
  {
    TaskID: 6,
    OwnerID: 2,
    Title: "Call Charlie about the project",
    Start: "2023-06-21T11:30:00.000Z",
    End: "2023-06-21T13:00:00.000Z",
    isAllDay: false,
  },
  {
    TaskID: 7,
    OwnerID: 3,
    Title: "Meeting with Alex",
    Start: "2023-06-22T14:00:00.000Z",
    End: "2023-06-22T16:00:00.000Z",
    isAllDay: false,
  },
  {
    TaskID: 9,
    OwnerID: 2,
    Title: "Alex's Birthday",
    Start: "2023-06-18T13:00:00.000Z",
    End: "2023-06-18T14:00:00.000Z",
    isAllDay: true,
  },
];

Dans le code ci-dessus, nous avons créé un tableau d’objets, chacun représentant un événement ou une tâche. Les champs déclarés dans chaque objet contiennent des informations sur l’événement ou la tâche telles que son titre, ses heures de début et de fin, ainsi qu’un isAllDay propriété pour dicter si l’événement doit être un événement d’une journée complète.

Dans notre events-utc.js fichier, nous exporterons également un displayDate qui sera utilisée comme date initiale par défaut dans notre calendrier en plus d’un sampleData tableau qui sera l’exemple de données de tableau que nous alimenterons dans les composants de notre planificateur.

Dans les exemples de calendrier que nous créons dans cet article, tous nos événements et tâches seront arbitrairement programmés pour juin 2023, nous aurons donc notre displayDate la valeur soit le 24 juin 2023, à minuit UTC.

const baseData = [
  {
    TaskID: 4,
    OwnerID: 2,
    Title: "Bowling tournament",
    Start: "2023-06-24T16:00:00.000Z",
    End: "2023-06-24T19:00:00.000Z",
    isAllDay: false,
  },
  {
    TaskID: 5,
    OwnerID: 2,
    Title: "Take the dog to the vet",
    Start: "2023-06-24T12:00:00.000Z",
    End: "2023-06-24T13:00:00.000Z",
    isAllDay: false,
  },
  {
    TaskID: 6,
    OwnerID: 2,
    Title: "Call Charlie about the project",
    Start: "2023-06-21T11:30:00.000Z",
    End: "2023-06-21T13:00:00.000Z",
    isAllDay: false,
  },
  {
    TaskID: 7,
    OwnerID: 3,
    Title: "Meeting with Alex",
    Start: "2023-06-22T14:00:00.000Z",
    End: "2023-06-22T16:00:00.000Z",
    isAllDay: false,
  },
  {
    TaskID: 9,
    OwnerID: 2,
    Title: "Alex's Birthday",
    Start: "2023-06-18T13:00:00.000Z",
    End: "2023-06-18T14:00:00.000Z",
    isAllDay: true,
  },
];

const currentYear = new Date().getFullYear();
const parseAdjust = (eventDate) => {
  const date = new Date(eventDate);
  date.setFullYear(currentYear);
  return date;
};


export const displayDate = new Date(Date.UTC(currentYear, 5, 24));
export const sampleData = baseData.map((dataItem) => ({
  id: dataItem.TaskID,
  start: parseAdjust(dataItem.Start),
  end: parseAdjust(dataItem.End),
  isAllDay: dataItem.isAllDay,
  title: dataItem.Title,
  ownerID: dataItem.OwnerID,
}));

Chez nos parents App instance du composant, nous pouvons maintenant importer le sampleData et displayDate valeurs et les utiliser comme accessoires pendant que nous rendons le principal Scheduler composant.

import * as React from "react";
import { Scheduler } from "@progress/kendo-react-scheduler";
import { sampleData, displayDate } from "./events-utc";

const App = () => {
  return (
    <Scheduler data={sampleData} defaultDate={displayDate}>
      {}
    </Scheduler>
  );
};

export default App;

Rien qu’avec les modifications ci-dessus, nous avons créé un simple planificateur quotidien qui répertorie les événements et les tâches à leurs jours et heures respectifs !

Vues du planificateur

Le composant KendoReact Scheduler propose plusieurs vues pour répondre à différents besoins de planification. Chaque vue peut être facilement intégrée et personnalisée en fonction des exigences de notre application.

Par exemple, nous pouvons utiliser le Vue Agenda pour afficher un résumé hebdomadaire sous forme de tableau.

import * as React from "react";
import { Scheduler, AgendaView } from "@progress/kendo-react-scheduler";
import { sampleData, displayDate } from "./events-utc";

const App = () => {
  return (
    <Scheduler data={sampleData} defaultDate={displayDate}>
      <AgendaView
        title="Compact View"
        step={2}
        numberOfDays={8}
        selectedDateFormat={"From: {0:D} To: {1:D}"}
        selectedShortDateFormat={"From: {0:d} To: {1:d}"}
      />
    </Scheduler>
  );
};
export default App;

Alternativement, nous pouvons utiliser le Vue quotidienne pour afficher les événements dans une disposition de calendrier quotidienne familière.

import * as React from "react";
import { Scheduler, DayView } from "@progress/kendo-react-scheduler";
import { sampleData, displayDate } from "./events-utc";

const App = () => {
  return (
    <Scheduler data={sampleData} defaultDate={displayDate}>
      <DayView
        title="Three-Day-View"
        numberOfDays={3}
        slotDuration={60}
        slotDivisions={2}
        startTime={"07:00"}
        endTime={"19:00"}
        workDayStart={"08:00"}
        workDayEnd={"18:00"}
      />
    </Scheduler>
  );
};

export default App;

Nous pouvons utiliser le Vue mensuelle pour afficher un aperçu du planning de haut niveau organisé par semaines.

import * as React from "react";
import { Scheduler, MonthView } from "@progress/kendo-react-scheduler";
import { sampleData, displayDate } from "./events-utc";

const App = () => {
  return (
    <Scheduler data={sampleData} defaultDate={displayDate}>
      <MonthView
        title="Month"
        selectedDateFormat="{0:M}"
        selectedShortDateFormat="{0:M}"
      />
    </Scheduler>
  );
};

export default App;

Le Vues Semaine et WorkWeek aider à afficher une disposition de calendrier familière avec un nombre de jours et une étape de navigation prédéfinis.

import * as React from "react";
import {
  Scheduler,
  WeekView,
  WorkWeekView,
} from "@progress/kendo-react-scheduler";
import { Day } from "@progress/kendo-date-math";
import { sampleData, displayDate } from "./events-utc";

const App = () => {
  return (
    <Scheduler data={sampleData} defaultDate={displayDate}>
      <WorkWeekView
        title="Work Week"
        workWeekStart={Day.Monday}
        workWeekEnd={Day.Friday}
      />
      <WeekView
        title="Full Week"
        workWeekStart={Day.Monday}
        workWeekEnd={Day.Friday}
      />
    </Scheduler>
  );
};

export default App;

Enfin, le Vue chronologique affiche les événements sur une échelle de temps continue.

import * as React from "react";
import { Scheduler, TimelineView } from "@progress/kendo-react-scheduler";
import { Day } from "@progress/kendo-date-math";
import { sampleData, displayDate } from "./events-utc";

const App = () => {
  return (
    <Scheduler data={sampleData} defaultDate={displayDate}>
      <TimelineView
        title="Hour-By-Hour"
        numberOfDays={2}
        columnWidth={100}
        slotDuration={60}
        slotDivisions={1}
        startTime={"08:00"}
        endTime={"18:00"}
        workDayStart={"09:00"}
        workDayEnd={"17:00"}
        workWeekStart={Day.Sunday}
        workWeekEnd={Day.Monday}
        showWorkHours={false}
      />
    </Scheduler>
  );
};

export default App;

Gestion des modifications de données

La flexibilité du KendoReact Scheduler dans la gestion des modifications de données est une fonctionnalité essentielle, en particulier dans les applications de planification dynamique où les événements peuvent être fréquemment ajoutés, mis à jour ou supprimés. Le onDataChange() le rappel est essentiel à la gestion de ces modifications, garantissant que l’état du planificateur reste synchronisé avec les données sous-jacentes.

Nous développerons l’exemple de vue hebdomadaire que nous avons créé ci-dessus pour garantir d’abord que les données utilisées dans le planificateur sont conservées dans l’état du composant.

import * as React from "react";
import { Scheduler, WeekView } from "@progress/kendo-react-scheduler";
import { Day } from "@progress/kendo-date-math";
import { sampleData, displayDate } from "./events-utc";

const App = () => {
  const [data, setData] = React.useState(sampleData);

  return (
    <Scheduler data={data} defaultDate={displayDate}>
      <WeekView
        title="Full Week"
        workWeekStart={Day.Monday}
        workWeekEnd={Day.Friday}
      />
    </Scheduler>
  );
};

export default App;

Glisser des événements

Le composant Scheduler peut recevoir un editable prop qui dicte si le composant Scheduler est modifiable et quels types d’édition il prend en charge. Pour notre premier exemple, nous pouvons activer la fonctionnalité glisser (c’est-à-dire la fonctionnalité permettant de faire glisser des événements dans le planning) en définissant l’option editable.drag propriété du planificateur pour true.

<Scheduler
  data={data}
  defaultDate={displayDate}
  editable={{
    drag: true, 
  }}
>
  {}
</Scheduler>

Lorsqu’un événement est déplacé vers un nouveau créneau horaire, le onDataChange() le rappel du composant est déclenché. Le onDataChange() le rappel peut gérer différents types de modifications de données. Cette fonction de rappel englobe trois collections clés d’éléments :

• mis à jour – représente tous les éléments qui ont été modifiés dans notre ensemble de données
• créé – inclut tous les nouveaux éléments qui ont été ajoutés à notre planificateur
• supprimé – contient tous les éléments qui ont été supprimés de notre ensemble de données

Pour la capacité de glisser, l’événement mis à jour sera transmis dans le updated tableau de l’argument de rappel. Nous l’utiliserons pour mettre à jour l’état de l’événement utilisé dans notre planificateur.

const App = () => {
  const [data, setData] = React.useState(sampleData);

  const handleDataChange = React.useCallback(
    ({ updated }) => {
      setData((old) =>
        old.map(
          (item) => updated.find((current) => current.id === item.id) || item
        )
      );
    },
    [setData]
  );

  return (
    <Scheduler
      data={data}
      defaultDate={displayDate}
      onDataChange={handleDataChange}
      editable={{
        drag: true,
      }}
    >
      <WeekView
        title="Full Week"
        workWeekStart={Day.Monday}
        workWeekEnd={Day.Friday}
      />
    </Scheduler>
  );
};

export default App;

Avec ce changement, nous pourrons modifier les heures et les jours auxquels un événement se déroule en le faisant simplement glisser sur le planificateur !

Suppression d’événements

Pour supprimer des événements du planificateur, nous pouvons activer le editable.remove propriété à true et utiliser le deleted tableau des onDataChange() rappel pour mettre à jour l’état de l’événement chaque fois qu’un événement est supprimé.

const App = () => {
  const [data, setData] = React.useState(sampleData);

  const handleDataChange = React.useCallback(
    ({ deleted }) => {
      setData((old) =>
        old.filter(
          (item) =>
            deleted.find((current) => current.id === item.id) === undefined
        )
      );
    },
    [setData]
  );

  return (
    <Scheduler
      data={data}
      defaultDate={displayDate}
      onDataChange={handleDataChange}
      editable={{
        remove: true,
      }}
    >
      <WeekView
        title="Full Week"
        workWeekStart={Day.Monday}
        workWeekEnd={Day.Friday}
      />
    </Scheduler>
  );
};

Une fois ce changement appliqué, notre planificateur nous offre la possibilité de supprimer des événements en cliquant sur une icône de suppression dans l’événement et en confirmant la suppression dans un modal de confirmation qui apparaît.

Ajout et modification d’événements

En plus de pouvoir faire glisser et supprimer des événements, le planificateur KendoReact fournit également la fonctionnalité permettant d’ajouter et de modifier des événements de manière transparente. Ceci est réalisé en permettant au editable.add et editable.edit propriétés dans le composant Scheduler et en tirant parti des created et updated tableaux dans le onDataChange() rappeler.

const App = () => {
  const [data, setData] = React.useState(sampleData);

  const handleDataChange = React.useCallback(
    ({ created, updated }) => {
      setData((old) =>
        old
          .map(
            (item) => updated.find((current) => current.id === item.id) || item
          )
          .concat(
            created.map((item) =>
              Object.assign({}, item, {
                id: guid(),
              })
            )
          )
      );
    },
    [setData]
  );

  return (
    <Scheduler
      data={data}
      defaultDate={displayDate}
      onDataChange={handleDataChange}
      editable={{
        add: true,
        edit: true,
      }}
    >
      <WeekView
        title="Full Week"
        workWeekStart={Day.Monday}
        workWeekEnd={Day.Friday}
      />
    </Scheduler>
  );
};

Avec ces ajouts, notre planificateur prend désormais entièrement en charge l’ajout et la modification d’événements. Pour ajouter un événement, nous pouvons double-cliquer sur un calendrier et remplir les détails dans le modal d’ajout d’événement qui apparaît.

Pour modifier un événement, nous pouvons double-cliquer sur un événement existant dans le calendrier et modifier les informations sur l’événement dans le modal d’édition qui apparaît.

Conclure

Le composant KendoReact Scheduler est un outil polyvalent qui peut être facilement adapté aux besoins dynamiques des applications de planification. Grâce à ses capacités modifiables, les développeurs peuvent fournir aux utilisateurs une interface intuitive et efficace pour gérer leurs plannings, qu’il s’agisse d’ajouter, de mettre à jour, de supprimer ou de faire glisser des événements.

Tout ce que nous avons couvert dans cet article n’est qu’un sous-ensemble de capacités et de fonctionnalités fournies par le composant KendoReact Scheduler. Pour plus de détails sur les fonctionnalités avancées telles que la personnalisation, les fuseaux horaires, la mondialisation, la navigation au clavier, etc., assurez-vous de consulter le composant officiel Documentation!

Et n’oubliez pas que KendoReact est livré avec un essai gratuit de 30 jours si vous êtes prêt à l’essayer.

Essayez KendoReact