Needless UI

Composants

Planificateur

Des événements sur un mois, une semaine, un jour ou en agenda, glissés à leur place.

Import

import-scheduler.ts
import { NuiScheduler, type NuiSchedulerEvent } from '@needless-ui/angular/scheduler';

NuiScheduler

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

Sélecteur
nui-scheduler
NomTypePar défautDescription
eventsInputNuiSchedulerEvent<T>[][]Les événements à afficher.
viewBidirectionnel'month' | 'week' | 'day' | 'agenda''week'La vue affichée.
viewsInputNuiSchedulerView[]all fourLes vues entre lesquelles on peut basculer.
dateBidirectionnelNuiDatetodayLe jour affiché, où se trouve aussi le focus clavier.
slotMinutesInputnumber30Les minutes par ligne de la grille horaire, et le pas de déplacement des événements.
scrollHourInputnumber8L’heure à laquelle s’ouvre la grille horaire.
agendaDaysInputnumber30Le nombre de jours à venir que couvre l’agenda.
editableInputbooleanfalseLes événements peuvent être déplacés et redimensionnés, au pointeur comme au clavier.
selectableInputbooleanfalseUne plage horaire peut être choisie sur la grille, pour créer des événements.
firstDayInput1 … 7Le premier jour de la semaine, 1 pour lundi. Par défaut, celui des paramètres régionaux.
headingLevelInputnumber2Le niveau du titre ; les jours de l’agenda descendent d’un niveau.
localeInputstringLOCALE_IDFormate les jours et les heures.
labelsInputPartial<NuiSchedulerLabels>Tous les textes que le planificateur affiche ou annonce, à traduire.
cornersInputNuiCornersLa forme de ses coins : round, squircle, bevel, scoop, notch ou square.
radiusInputNuiRadiusLa taille de ses coins : none, small, medium, large ou full.
densityInputNuiDensityLa place qu’il occupe : compact, regular ou roomy.
eventClickOutputNuiSchedulerEvent<T>Émet l’événement cliqué, ou ouvert avec Entrée.
eventChangeOutput{ event, start, end }Émet les nouveaux horaires d’un événement après un déplacement ou un redimensionnement.
slotSelectOutput{ start, end, allDay }Émet la plage horaire choisie sur la grille.
rangeChangeOutput{ start, end }Émet le premier et le dernier jour affichés quand ils changent.

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

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.

NomTypePar défautDescription
id, titlePropriétéstringSa clé, et ce qu’il affiche.
start, endPropriétéNuiDateTime | NuiDateDes dates et heures, ou des dates seules pour les événements sur toute la journée.
allDayPropriétébooleanPar défaut, vrai quand start n’a pas d’heure.
tonePropriété'accent' | 'neutral' | 'success' | 'warning' | 'danger''accent'Sa couleur.
editablePropriétébooleanS’il peut être déplacé, quoi qu’en dise le planificateur.
dataPropriétéTTout ce que vous voulez garder avec lui.

NuiSchedulerEventTemplate

Dessine les événements. Le contexte contient l’événement et son horaire sous forme de texte.

Sélecteur
ng-template[nuiSchedulerEvent]