Scheduler API for React

Import

import-scheduler.tsx

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

NuiScheduler

Events in a month, a week, a day, an agenda or a timeline.

NuiScheduler: Properties
Name	Type	Default	Description
`events`Prop	`NuiSchedulerEvent<T>[]`	`[]`	The events to show.
`resources`Prop	`NuiSchedulerResource[]`	`[]`	Rooms, people or machines: rows of the timeline, and columns of the day and the week.
`view` `defaultView` `onViewChange`State	`'month' \| 'week' \| 'day' \| 'agenda' \| 'timeline'`	`'week'`	The view shown.
`views`Prop	`NuiSchedulerView[]`	`all`	The views people can switch between. By default all of them, the timeline only with resources.
`timelineSpan`Prop	`'day' \| 'week' \| 'month'`	`'day'`	What the timeline shows: a day by its slots, or a week or a month by its days.
`date` `defaultDate` `onDateChange`State	`NuiDate`	`today`	The day shown, and where the keyboard is. Pass `defaultDate` when a server renders the scheduler: its today may not be the reader’s.
`slotMinutes`Prop	`number`	`30`	Minutes per row of the time grid, or per column of a day’s timeline.
`snapMinutes`Prop	`number`	`slotMinutes`	The step events move and resize by.
`dayStart, dayEnd`Prop	`number`	`0, 24`	The hours the time grid shows, from and to.
`scrollHour`Prop	`number`	`8`	The hour the time grid opens at.
`agendaDays`Prop	`number`	`30`	Days the agenda looks ahead.
`businessHours`Prop	`NuiSchedulerHours[]`		Working hours, such as `{ days: [1, 2, 3, 4, 5], start: '09:00', end: '17:00' }`. Other time is shaded.
`weekends`Prop	`boolean`	`true`	Shows the weekend. Without it, every view leaves out the locale’s weekend.
`weekNumbers`Prop	`boolean`	`false`	Shows ISO week numbers in the month, and above the times.
`editable`Prop	`boolean`	`false`	Events can be moved and resized, by pointer and keyboard.
`selectable`Prop	`boolean`	`false`	Time can be chosen on the grid, to create events.
`allow`Prop	`(time) => boolean`		Decides whether a move, a resize or a choice of time can happen.
`toolbar`Prop	`boolean \| ((toolbar: NuiSchedulerToolbar) => ReactNode)`	`true`	Shows the toolbar, or draws one of your own from what it’s given.
`firstDay`Prop	`1 … 7`		The first day of the week, 1 for Monday. By default, the locale’s.
`headingLevel`Prop	`number`	`2`	The title’s heading level; the agenda’s days are one deeper.
`locale`Prop	`string`	`'en-US'`	Formats days and times.
`labels`Prop	`Partial<NuiSchedulerLabels>`		Every text the scheduler shows or announces, to translate.
`corners`Prop	`NuiCorners`		The shape of its corners: `round`, `squircle`, `bevel`, `scoop`, `notch` or `square`.
`radius`Prop	`NuiRadius`		How big its corners are: `none`, `small`, `medium`, `large` or `full`.
`density`Prop	`NuiDensity`		How much room it takes: `compact`, `regular` or `roomy`.
`renderEvent`Render prop	`(event, { time }) => ReactNode`		Draws events yourself, from the event and its time as text.
`renderResource`Render prop	`(resource) => ReactNode`		Draws the heads of resources yourself.
`onEventClick`Callback	`(event: NuiSchedulerEvent<T>) => void`		Called with an event clicked, or opened with Enter.
`onEventChange`Callback	`({ event, start, end, resource? }) => void`		Called with an event’s new times after a move or a resize, and its resources when they changed. Update `events` to keep the change.
`onSlotSelect`Callback	`({ start, end, allDay, resource? }) => void`		Called with the time chosen on the grid, and its resource.
`onRangeChange`Callback	`({ start, end }) => void`		Called with the first and last day shown when they change, to load their events.
`ref`Prop	`Ref<NuiSchedulerHandle>`		What the scheduler’s `ref` reaches: paging, for a toolbar of your own.
`previous, next, goToday`Method	`() => void`		Show the previous or next page, or today, for a toolbar of your own.
`title`Property	`string`		What’s shown, as the toolbar’s title says it.

State works like React’s own inputs: pass a value and update it from its on…Change callback, or pass a default… value and let the component keep it.

Customization props you leave unset follow the nearest data-nui-* attribute. See the customization guide.

NuiSchedulerToolbar

What a toolbar function gets, to draw a toolbar of your own.

NuiSchedulerToolbar: Properties
Name	Type	Description
`title`Property	`string`	What’s shown, as the toolbar’s title says it.
`view, views`Property	`NuiSchedulerView, NuiSchedulerView[]`	The view shown, and the views offered.
`setView, previous, next, goToday`Method	`(view?) => void`	Switch the view, show the previous or next page, or show today.

NuiSchedulerEvent

An event. A timed event’s end isn’t included; an all-day event’s end is its last day.

NuiSchedulerEvent: Properties
Name	Type	Default	Description
`id, title`Property	`string`		Its key, and what it shows.
`start, end`Property	`NuiDateTime \| NuiDate`		Dates and times, or dates for all-day events.
`allDay`Property	`boolean`		By default, whether `start` has no time.
`tone`Property	`'accent' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'accent'`	Its palette.
`color, class`Property	`string`		Any CSS color, which wins over its tone, and classes to style it with.
`resource`Property	`string \| string[]`		The resources it belongs to.
`rrule`Property	`string`		A repeat rule from RFC 5545, such as `FREQ=WEEKLY;BYDAY=MO`.
`exdate`Property	`string[]`		Starts of occurrences that don’t happen.
`recurrenceId`Property	`NuiDateTime \| NuiDate`		On an occurrence the scheduler reports: the start its rule gave it.
`editable`Property	`boolean`		Whether it can be moved, whatever the scheduler says.
`data`Property	`T`		Anything else to keep with it.

NuiSchedulerResource

A room, a person or a machine that events belong to.

NuiSchedulerResource: Properties
Name	Type	Description
`id, title`Property	`string`	Its key, and the name it shows.
`tone, color`Property	`NuiSchedulerTone, string`	The colors of its events, unless they have their own.
`businessHours`Property	`NuiSchedulerHours[]`	When it’s available, instead of the scheduler’s working hours.
`data`Property	`R`	Anything else to keep with it.

Helpers

Functions for repeating events and iCalendar files.

Helpers: Properties
Name	Type	Description
`nuiSchedulerOccurrences`Method	`(event, first, last) => NuiSchedulerEvent[]`	An event as it shows on the days given: each occurrence of a repeating one.
`nuiSchedulerRule`Method	`(text: string) => NuiSchedulerRule \| null`	Reads a repeat rule, or returns null.
`nuiSchedulerToIcs`Method	`(events, options?) => string`	Writes events as an iCalendar file.
`nuiSchedulerFromIcs`Method	`(text, { timeZone? }) => NuiSchedulerEvent[]`	Reads the events of an iCalendar file, with their times in one time zone.