API der Komponente Terminplaner für React

Import

import-scheduler.tsx

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

NuiScheduler

Termine in der Monats-, Wochen-, Tages- oder Agendaansicht oder auf einer Timeline.

NuiScheduler: Eigenschaften
Name	Typ	Standardwert	Beschreibung
`events`Prop	`NuiSchedulerEvent<T>[]`	`[]`	Die anzuzeigenden Termine.
`resources`Prop	`NuiSchedulerResource[]`	`[]`	Räume, Personen oder Maschinen: Zeilen der Timeline und Spalten von Tag und Woche.
`view` `defaultView` `onViewChange`State	`'month' \| 'week' \| 'day' \| 'agenda' \| 'timeline'`	`'week'`	Die angezeigte Ansicht.
`views`Prop	`NuiSchedulerView[]`	`all`	Die Ansichten, zwischen denen man wechseln kann. Standardmäßig alle, die Timeline nur mit Ressourcen.
`timelineSpan`Prop	`'day' \| 'week' \| 'month'`	`'day'`	Was die Timeline zeigt: einen Tag nach Zeitfenstern oder eine Woche oder einen Monat nach Tagen.
`date` `defaultDate` `onDateChange`State	`NuiDate`	`today`	Der angezeigte Tag, auf dem auch der Tastaturfokus steht. Übergib `defaultDate`, wenn ein Server den Terminplaner rendert: Für den Server ist heute vielleicht ein anderer Tag als für den Leser.
`slotMinutes`Prop	`number`	`30`	Minuten pro Zeile des Zeitrasters oder pro Spalte der Timeline eines Tages.
`snapMinutes`Prop	`number`	`slotMinutes`	Die Schrittweite, in der sich Termine verschieben und in der Dauer ändern.
`dayStart, dayEnd`Prop	`number`	`0, 24`	Von welcher bis zu welcher Stunde das Zeitraster reicht.
`scrollHour`Prop	`number`	`8`	Die Stunde, die das Zeitraster beim Öffnen zeigt.
`agendaDays`Prop	`number`	`30`	Wie viele Tage die Agenda vorausschaut.
`businessHours`Prop	`NuiSchedulerHours[]`		Arbeitszeiten, etwa `{ days: [1, 2, 3, 4, 5], start: '09:00', end: '17:00' }`. Die übrige Zeit wird schattiert.
`weekends`Prop	`boolean`	`true`	Zeigt das Wochenende. Ohne diese Option blendet jede Ansicht das Wochenende der Locale aus.
`weekNumbers`Prop	`boolean`	`false`	Zeigt ISO-Kalenderwochen im Monat und über den Uhrzeiten.
`editable`Prop	`boolean`	`false`	Termine lassen sich verschieben und in der Dauer ändern, per Zeiger und per Tastatur.
`selectable`Prop	`boolean`	`false`	Im Grid lässt sich Zeit markieren, um Termine anzulegen.
`allow`Prop	`(time) => boolean`		Entscheidet, ob ein Verschieben, eine Änderung der Dauer oder eine Zeitauswahl erlaubt ist.
`toolbar`Prop	`boolean \| ((toolbar: NuiSchedulerToolbar) => ReactNode)`	`true`	Zeigt die Toolbar, oder deine Funktion zeichnet aus dem, was sie bekommt, eine eigene.
`firstDay`Prop	`1 … 7`		Der erste Tag der Woche, 1 für Montag. Standardmäßig der aus der Locale.
`headingLevel`Prop	`number`	`2`	Die Überschriftenebene des Titels; die Tage der Agenda liegen eine Ebene tiefer.
`locale`Prop	`string`	`'en-US'`	Formatiert Tage und Uhrzeiten.
`labels`Prop	`Partial<NuiSchedulerLabels>`		Alle Texte, die der Terminplaner anzeigt oder ansagt, zum Übersetzen.
`corners`Prop	`NuiCorners`		Die Form der Ecken: `round`, `squircle`, `bevel`, `scoop`, `notch` oder `square`.
`radius`Prop	`NuiRadius`		Wie groß die Ecken sind: `none`, `small`, `medium`, `large` oder `full`.
`density`Prop	`NuiDensity`		Wie viel Platz die Komponente einnimmt: `compact`, `regular` oder `roomy`.
`renderEvent`Render-Prop	`(event, { time }) => ReactNode`		Damit zeichnest du Termine selbst, aus dem Termin und seiner Zeit als Text.
`renderResource`Render-Prop	`(resource) => ReactNode`		Damit zeichnest du die Kopfzellen der Ressourcen selbst.
`onEventClick`Callback	`(event: NuiSchedulerEvent<T>) => void`		Wird mit einem angeklickten oder mit Enter geöffneten Termin aufgerufen.
`onEventChange`Callback	`({ event, start, end, resource? }) => void`		Wird nach dem Verschieben oder Ändern der Dauer mit den neuen Zeiten eines Termins aufgerufen, und mit seinen Ressourcen, wenn sie sich geändert haben. Aktualisiere `events`, um die Änderung zu übernehmen.
`onSlotSelect`Callback	`({ start, end, allDay, resource? }) => void`		Wird mit der im Grid markierten Zeit und ihrer Ressource aufgerufen.
`onRangeChange`Callback	`({ start, end }) => void`		Wird mit dem ersten und letzten angezeigten Tag aufgerufen, wenn sie sich ändern, damit du ihre Termine laden kannst.
`ref`Prop	`Ref<NuiSchedulerHandle>`		Was du über die `ref` des Terminplaners erreichst: das Blättern, für eine eigene Toolbar.
`previous, next, goToday`Methode	`() => void`		Zeigen die vorherige oder nächste Seite oder heute, für eine eigene Toolbar.
`title`Eigenschaft	`string`		Was angezeigt wird, so wie es der Titel der Toolbar sagt.

State funktioniert wie bei Formularfeldern in React: Übergib einen Wert und aktualisiere ihn in seinem on…Change-Callback, oder übergib einen default…-Wert und überlass ihn der Komponente.

Anpassungs-Props, die du nicht setzt, richten sich nach dem nächstgelegenen data-nui-*-Attribut. Mehr dazu in der Anleitung zur Anpassung.

NuiSchedulerToolbar

Was eine toolbar-Funktion bekommt, um eine eigene Toolbar zu zeichnen.

NuiSchedulerToolbar: Eigenschaften
Name	Typ	Beschreibung
`title`Eigenschaft	`string`	Was angezeigt wird, so wie es der Titel der Toolbar sagt.
`view, views`Eigenschaft	`NuiSchedulerView, NuiSchedulerView[]`	Die angezeigte Ansicht und die angebotenen Ansichten.
`setView, previous, next, goToday`Methode	`(view?) => void`	Wechseln die Ansicht oder zeigen die vorherige oder nächste Seite oder heute.

NuiSchedulerEvent

Ein Termin. Das Ende eines Termins mit Uhrzeit ist nicht eingeschlossen; bei einem ganztägigen Termin ist das Ende sein letzter Tag.

NuiSchedulerEvent: Eigenschaften
Name	Typ	Standardwert	Beschreibung
`id, title`Eigenschaft	`string`		Sein Schlüssel und was er anzeigt.
`start, end`Eigenschaft	`NuiDateTime \| NuiDate`		Datum mit Uhrzeit oder, bei ganztägigen Terminen, nur das Datum.
`allDay`Eigenschaft	`boolean`		Standardmäßig gesetzt, wenn `start` keine Uhrzeit hat.
`tone`Eigenschaft	`'accent' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'accent'`	Seine Farbpalette.
`color, class`Eigenschaft	`string`		Eine beliebige CSS-Farbe, die Vorrang vor seinem Farbton hat, und Klassen, mit denen du ihn gestaltest.
`resource`Eigenschaft	`string \| string[]`		Die Ressourcen, zu denen er gehört.
`rrule`Eigenschaft	`string`		Eine Wiederholungsregel nach RFC 5545, etwa `FREQ=WEEKLY;BYDAY=MO`.
`exdate`Eigenschaft	`string[]`		Die Beginnzeiten von Vorkommen, die ausfallen.
`recurrenceId`Eigenschaft	`NuiDateTime \| NuiDate`		An einem Vorkommen, das der Terminplaner meldet: der Beginn, den ihm seine Regel gab.
`editable`Eigenschaft	`boolean`		Ob er sich verschieben lässt, unabhängig davon, was der Terminplaner vorgibt.
`data`Eigenschaft	`T`		Alles Weitere, das du mit ihm aufbewahren willst.

NuiSchedulerResource

Eine Ressource, zu der Termine gehören: ein Raum, eine Person oder eine Maschine.

NuiSchedulerResource: Eigenschaften
Name	Typ	Beschreibung
`id, title`Eigenschaft	`string`	Ihr Schlüssel und der Name, den sie anzeigt.
`tone, color`Eigenschaft	`NuiSchedulerTone, string`	Die Farben ihrer Termine, sofern diese keine eigenen haben.
`businessHours`Eigenschaft	`NuiSchedulerHours[]`	Wann sie verfügbar ist, statt der Arbeitszeiten des Terminplaners.
`data`Eigenschaft	`R`	Alles Weitere, das du mit ihr aufbewahren willst.

Helpers

Funktionen für wiederkehrende Termine und iCalendar-Dateien.

Helpers: Eigenschaften
Name	Typ	Beschreibung
`nuiSchedulerOccurrences`Methode	`(event, first, last) => NuiSchedulerEvent[]`	Ein Termin, wie er an den angegebenen Tagen erscheint: jedes Vorkommen, wenn er sich wiederholt.
`nuiSchedulerRule`Methode	`(text: string) => NuiSchedulerRule \| null`	Liest eine Wiederholungsregel oder gibt null zurück.
`nuiSchedulerToIcs`Methode	`(events, options?) => string`	Schreibt Termine als iCalendar-Datei.
`nuiSchedulerFromIcs`Methode	`(text, { timeZone? }) => NuiSchedulerEvent[]`	Liest die Termine einer iCalendar-Datei, mit ihren Zeiten in einer einzigen Zeitzone.