API di Pianificatore per React

Import

import-scheduler.tsx

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

NuiScheduler

Eventi in un mese, una settimana, un giorno, un’agenda o una timeline.

NuiScheduler: Proprietà
Nome	Tipo	Predefinito	Descrizione
`events`Prop	`NuiSchedulerEvent<T>[]`	`[]`	Gli eventi da mostrare.
`resources`Prop	`NuiSchedulerResource[]`	`[]`	Sale, persone o macchine: righe della timeline e colonne del giorno e della settimana.
`view` `defaultView` `onViewChange`Stato	`'month' \| 'week' \| 'day' \| 'agenda' \| 'timeline'`	`'week'`	La vista mostrata.
`views`Prop	`NuiSchedulerView[]`	`all`	Le viste tra cui si può passare. Di default tutte, la timeline solo se ci sono risorse.
`timelineSpan`Prop	`'day' \| 'week' \| 'month'`	`'day'`	Cosa mostra la timeline: un giorno per slot, o una settimana o un mese per giorni.
`date` `defaultDate` `onDateChange`Stato	`NuiDate`	`today`	Il giorno mostrato, dove si trova anche il focus da tastiera. Passa `defaultDate` quando un server renderizza il pianificatore: il giorno di oggi sul server potrebbe non essere quello di chi legge.
`slotMinutes`Prop	`number`	`30`	Minuti per riga della griglia oraria, o per colonna della timeline di un giorno.
`snapMinutes`Prop	`number`	`slotMinutes`	Il passo con cui gli eventi si spostano e si ridimensionano.
`dayStart, dayEnd`Prop	`number`	`0, 24`	Le ore di inizio e di fine della griglia oraria.
`scrollHour`Prop	`number`	`8`	L’ora a cui si apre la griglia oraria.
`agendaDays`Prop	`number`	`30`	Quanti giorni in avanti mostra l’agenda.
`businessHours`Prop	`NuiSchedulerHours[]`		L’orario di lavoro, come `{ days: [1, 2, 3, 4, 5], start: '09:00', end: '17:00' }`. Il resto del tempo è ombreggiato.
`weekends`Prop	`boolean`	`true`	Mostra il fine settimana. Senza, ogni vista esclude il fine settimana del locale.
`weekNumbers`Prop	`boolean`	`false`	Mostra i numeri di settimana ISO nel mese, e sopra gli orari.
`editable`Prop	`boolean`	`false`	Gli eventi si possono spostare e ridimensionare, con il puntatore e da tastiera.
`selectable`Prop	`boolean`	`false`	Si può scegliere un orario sulla griglia, per creare eventi.
`allow`Prop	`(time) => boolean`		Decide se uno spostamento, un ridimensionamento o la scelta di un orario sono permessi.
`toolbar`Prop	`boolean \| ((toolbar: NuiSchedulerToolbar) => ReactNode)`	`true`	Mostra la barra degli strumenti, oppure una funzione ne disegna una tutta tua a partire da ciò che riceve.
`firstDay`Prop	`1 … 7`		Il primo giorno della settimana, 1 per lunedì. Di default, quello del locale.
`headingLevel`Prop	`number`	`2`	Il livello di intestazione del titolo; i giorni dell’agenda scendono di un livello.
`locale`Prop	`string`	`'en-US'`	Formatta giorni e orari.
`labels`Prop	`Partial<NuiSchedulerLabels>`		Ogni testo che il pianificatore mostra o annuncia, da tradurre.
`corners`Prop	`NuiCorners`		La forma degli angoli: `round`, `squircle`, `bevel`, `scoop`, `notch` o `square`.
`radius`Prop	`NuiRadius`		Quanto sono grandi gli angoli: `none`, `small`, `medium`, `large` o `full`.
`density`Prop	`NuiDensity`		Quanto spazio occupa: `compact`, `regular` o `roomy`.
`renderEvent`Render prop	`(event, { time }) => ReactNode`		Disegna tu gli eventi, a partire dall’evento e dal suo orario come testo.
`renderResource`Render prop	`(resource) => ReactNode`		Disegna tu le intestazioni delle risorse.
`onEventClick`Callback	`(event: NuiSchedulerEvent<T>) => void`		Chiamata con un evento cliccato, o aperto con Invio.
`onEventChange`Callback	`({ event, start, end, resource? }) => void`		Chiamata con i nuovi orari di un evento dopo uno spostamento o un ridimensionamento, e le sue risorse se sono cambiate. Aggiorna `events` per mantenere la modifica.
`onSlotSelect`Callback	`({ start, end, allDay, resource? }) => void`		Chiamata con l’orario scelto sulla griglia, e la sua risorsa.
`onRangeChange`Callback	`({ start, end }) => void`		Chiamata con il primo e l’ultimo giorno mostrati quando cambiano, per caricarne gli eventi.
`ref`Prop	`Ref<NuiSchedulerHandle>`		Cosa espone il `ref` del pianificatore: il cambio di pagina, per una barra degli strumenti tutta tua.
`previous, next, goToday`Metodo	`() => void`		Mostrano la pagina precedente o successiva, o oggi, per una barra degli strumenti tutta tua.
`title`Proprietà	`string`		Ciò che è mostrato, con le parole del titolo della barra degli strumenti.

Lo stato funziona come nei campi dei moduli di React: passa un valore e aggiornalo dalla sua callback on…Change, oppure passa un valore default… e lascia che lo tenga il componente.

Le props di personalizzazione che non imposti seguono l’attributo data-nui-* più vicino. Vedi la guida alla personalizzazione.

NuiSchedulerToolbar

Cosa riceve una funzione toolbar, per disegnare una barra degli strumenti tutta tua.

NuiSchedulerToolbar: Proprietà
Nome	Tipo	Descrizione
`title`Proprietà	`string`	Ciò che è mostrato, con le parole del titolo della barra degli strumenti.
`view, views`Proprietà	`NuiSchedulerView, NuiSchedulerView[]`	La vista mostrata, e le viste offerte.
`setView, previous, next, goToday`Metodo	`(view?) => void`	Cambiano vista, o mostrano la pagina precedente o successiva, o oggi.

NuiSchedulerEvent

Un evento. La fine di un evento con orario è esclusa; quella di un evento di tutto il giorno è il suo ultimo giorno.

NuiSchedulerEvent: Proprietà
Nome	Tipo	Predefinito	Descrizione
`id, title`Proprietà	`string`		La sua chiave, e cosa mostra.
`start, end`Proprietà	`NuiDateTime \| NuiDate`		Date e orari, o solo date per gli eventi di tutto il giorno.
`allDay`Proprietà	`boolean`		Di default, se `start` non ha un orario.
`tone`Proprietà	`'accent' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'accent'`	La sua palette.
`color, class`Proprietà	`string`		Qualsiasi colore CSS, che prevale sul suo tono, e le classi con cui dargli uno stile.
`resource`Proprietà	`string \| string[]`		Le risorse a cui appartiene.
`rrule`Proprietà	`string`		Una regola di ripetizione secondo RFC 5545, come `FREQ=WEEKLY;BYDAY=MO`.
`exdate`Proprietà	`string[]`		L’inizio di ogni occorrenza che non si tiene.
`recurrenceId`Proprietà	`NuiDateTime \| NuiDate`		Su un’occorrenza riportata dal pianificatore: l’inizio che le ha dato la sua regola.
`editable`Proprietà	`boolean`		Se si può spostare, qualunque cosa dica il pianificatore.
`data`Proprietà	`T`		Qualsiasi altra cosa da tenere insieme all’evento.

NuiSchedulerResource

Una sala, una persona o una macchina a cui appartengono degli eventi.

NuiSchedulerResource: Proprietà
Nome	Tipo	Descrizione
`id, title`Proprietà	`string`	La sua chiave, e il nome che mostra.
`tone, color`Proprietà	`NuiSchedulerTone, string`	I colori dei suoi eventi, se non ne hanno di propri.
`businessHours`Proprietà	`NuiSchedulerHours[]`	Quando è disponibile, al posto dell’orario di lavoro del pianificatore.
`data`Proprietà	`R`	Qualsiasi altra cosa da tenere insieme alla risorsa.

Helpers

Funzioni per gli eventi che si ripetono e i file iCalendar.

Helpers: Proprietà
Nome	Tipo	Descrizione
`nuiSchedulerOccurrences`Metodo	`(event, first, last) => NuiSchedulerEvent[]`	Un evento come appare nei giorni indicati: ogni occorrenza, se si ripete.
`nuiSchedulerRule`Metodo	`(text: string) => NuiSchedulerRule \| null`	Legge una regola di ripetizione, o restituisce null.
`nuiSchedulerToIcs`Metodo	`(events, options?) => string`	Scrive gli eventi come file iCalendar.
`nuiSchedulerFromIcs`Metodo	`(text, { timeZone? }) => NuiSchedulerEvent[]`	Legge gli eventi di un file iCalendar, con gli orari in un unico fuso orario.