API du composant Planificateur pour React

Import

import-scheduler.tsx

import { NuiScheduler, type NuiSchedulerHandle } from '@needless-ui/react/scheduler';

NuiScheduler

Des événements sur un mois, une semaine, un jour, en agenda ou sur une timeline.

NuiScheduler: Propriétés
Nom	Type	Par défaut	Description
`events`Prop	`NuiSchedulerEvent<T>[]`	`[]`	Les événements à afficher.
`resources`Prop	`NuiSchedulerResource[]`	`[]`	Salles, personnes ou machines : les lignes de la timeline, et les colonnes du jour et de la semaine.
`view` `defaultView` `onViewChange`État	`'month' \| 'week' \| 'day' \| 'agenda' \| 'timeline'`	`'week'`	La vue affichée.
`views`Prop	`NuiSchedulerView[]`	`all`	Les vues entre lesquelles on peut basculer. Par défaut, toutes, et la timeline seulement avec des ressources.
`timelineSpan`Prop	`'day' \| 'week' \| 'month'`	`'day'`	Ce que montre la timeline : un jour par créneaux, ou une semaine ou un mois par jours.
`date` `defaultDate` `onDateChange`État	`NuiDate`	`today`	Le jour affiché, où se trouve aussi le focus clavier. Passez `defaultDate` quand le rendu du planificateur se fait sur un serveur : la date du jour sur le serveur n’est pas forcément celle du lecteur.
`slotMinutes`Prop	`number`	`30`	Les minutes par ligne de la grille horaire, ou par colonne de la timeline d’un jour.
`snapMinutes`Prop	`number`	`slotMinutes`	Le pas de déplacement et de redimensionnement des événements.
`dayStart, dayEnd`Prop	`number`	`0, 24`	Les heures de début et de fin de la grille horaire.
`scrollHour`Prop	`number`	`8`	L’heure à laquelle s’ouvre la grille horaire.
`agendaDays`Prop	`number`	`30`	Le nombre de jours à venir que couvre l’agenda.
`businessHours`Prop	`NuiSchedulerHours[]`		Les heures de travail, comme `{ days: [1, 2, 3, 4, 5], start: '09:00', end: '17:00' }`. Le reste du temps est grisé.
`weekends`Prop	`boolean`	`true`	Affiche le week-end. Sans lui, chaque vue masque le week-end des paramètres régionaux.
`weekNumbers`Prop	`boolean`	`false`	Affiche les numéros de semaine ISO dans le mois, et au-dessus des heures.
`editable`Prop	`boolean`	`false`	Les événements peuvent être déplacés et redimensionnés, au pointeur comme au clavier.
`selectable`Prop	`boolean`	`false`	Une plage horaire peut être choisie sur la grille, pour créer des événements.
`allow`Prop	`(time) => boolean`		Décide si un déplacement, un redimensionnement ou un choix de plage horaire peut avoir lieu.
`toolbar`Prop	`boolean \| ((toolbar: NuiSchedulerToolbar) => ReactNode)`	`true`	Affiche la barre d’outils ; une fonction dessine la vôtre à partir de ce qu’elle reçoit.
`firstDay`Prop	`1 … 7`		Le premier jour de la semaine, 1 pour lundi. Par défaut, celui des paramètres régionaux.
`headingLevel`Prop	`number`	`2`	Le niveau du titre ; les jours de l’agenda descendent d’un niveau.
`locale`Prop	`string`	`'en-US'`	Formate les jours et les heures.
`labels`Prop	`Partial<NuiSchedulerLabels>`		Tous les textes que le planificateur affiche ou annonce, à traduire.
`corners`Prop	`NuiCorners`		La forme de ses coins : `round`, `squircle`, `bevel`, `scoop`, `notch` ou `square`.
`radius`Prop	`NuiRadius`		La taille de ses coins : `none`, `small`, `medium`, `large` ou `full`.
`density`Prop	`NuiDensity`		La place qu’il occupe : `compact`, `regular` ou `roomy`.
`renderEvent`Render prop	`(event, { time }) => ReactNode`		Dessinez vous-même les événements, à partir de l’événement et de son horaire sous forme de texte.
`renderResource`Render prop	`(resource) => ReactNode`		Dessinez vous-même les en-têtes des ressources.
`onEventClick`Callback	`(event: NuiSchedulerEvent<T>) => void`		Appelé avec l’événement cliqué, ou ouvert avec Entrée.
`onEventChange`Callback	`({ event, start, end, resource? }) => void`		Appelé avec les nouveaux horaires d’un événement après un déplacement ou un redimensionnement, et ses ressources quand elles ont changé. Mettez à jour `events` pour conserver le changement.
`onSlotSelect`Callback	`({ start, end, allDay, resource? }) => void`		Appelé avec la plage horaire choisie sur la grille, et sa ressource.
`onRangeChange`Callback	`({ start, end }) => void`		Appelé avec le premier et le dernier jour affichés quand ils changent, pour charger leurs événements.
`ref`Prop	`Ref<NuiSchedulerHandle>`		Ce qu’expose la `ref` du planificateur : la navigation entre les pages, pour votre propre barre d’outils.
`previous, next, goToday`Méthode	`() => void`		Affichent la page précédente ou suivante, ou aujourd’hui, pour votre propre barre d’outils.
`title`Propriété	`string`		Ce qui est affiché, tel que le formule le titre de la barre d’outils.

L’état fonctionne comme pour les champs de formulaire de React : passez une valeur et mettez-la à jour depuis son callback on…Change, ou passez une valeur default… et laissez le composant la garder.

Les props de personnalisation que vous ne définissez pas suivent l’attribut data-nui-* le plus proche. Consultez le guide de personnalisation.

NuiSchedulerToolbar

Ce que reçoit une fonction toolbar, pour dessiner votre propre barre d’outils.

NuiSchedulerToolbar: Propriétés
Nom	Type	Description
`title`Propriété	`string`	Ce qui est affiché, tel que le formule le titre de la barre d’outils.
`view, views`Propriété	`NuiSchedulerView, NuiSchedulerView[]`	La vue affichée, et les vues proposées.
`setView, previous, next, goToday`Méthode	`(view?) => void`	Changent de vue, ou affichent la page précédente ou suivante, ou aujourd’hui.

NuiSchedulerEvent

Un événement. La fin d’un événement avec horaire est exclue ; celle d’un événement sur toute la journée est son dernier jour.

NuiSchedulerEvent: Propriétés
Nom	Type	Par défaut	Description
`id, title`Propriété	`string`		Sa clé, et ce qu’il affiche.
`start, end`Propriété	`NuiDateTime \| NuiDate`		Des dates et heures, ou des dates seules pour les événements sur toute la journée.
`allDay`Propriété	`boolean`		Par défaut, vrai quand `start` n’a pas d’heure.
`tone`Propriété	`'accent' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'accent'`	Sa palette.
`color, class`Propriété	`string`		Toute couleur CSS, qui l’emporte sur son ton, et des classes pour le styler.
`resource`Propriété	`string \| string[]`		Les ressources auxquelles il appartient.
`rrule`Propriété	`string`		Une règle de récurrence de la RFC 5545, comme `FREQ=WEEKLY;BYDAY=MO`.
`exdate`Propriété	`string[]`		Les débuts des occurrences qui n’ont pas lieu.
`recurrenceId`Propriété	`NuiDateTime \| NuiDate`		Sur une occurrence que signale le planificateur : le début que sa règle lui a donné.
`editable`Propriété	`boolean`		S’il peut être déplacé, quoi qu’en dise le planificateur.
`data`Propriété	`T`		Tout ce que vous voulez garder avec lui.

NuiSchedulerResource

Une salle, une personne ou une machine à laquelle appartiennent des événements.

NuiSchedulerResource: Propriétés
Nom	Type	Description
`id, title`Propriété	`string`	Sa clé, et le nom qu’elle affiche.
`tone, color`Propriété	`NuiSchedulerTone, string`	Les couleurs de ses événements, sauf s’ils ont les leurs.
`businessHours`Propriété	`NuiSchedulerHours[]`	Quand elle est disponible, à la place des heures de travail du planificateur.
`data`Propriété	`R`	Tout ce que vous voulez garder avec elle.

Helpers

Des fonctions pour les événements récurrents et les fichiers iCalendar.

Helpers: Propriétés
Nom	Type	Description
`nuiSchedulerOccurrences`Méthode	`(event, first, last) => NuiSchedulerEvent[]`	Un événement tel qu’il apparaît sur les jours donnés : chaque occurrence, s’il se répète.
`nuiSchedulerRule`Méthode	`(text: string) => NuiSchedulerRule \| null`	Lit une règle de récurrence, ou renvoie null.
`nuiSchedulerToIcs`Méthode	`(events, options?) => string`	Écrit des événements dans un fichier iCalendar.
`nuiSchedulerFromIcs`Méthode	`(text, { timeZone? }) => NuiSchedulerEvent[]`	Lit les événements d’un fichier iCalendar, avec leurs heures dans un seul fuseau horaire.