API компонента Планировщик для React

Импорт

import-scheduler.tsx

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

NuiScheduler

События в виде месяца, недели, дня, повестки дня или таймлайна.

NuiScheduler: Свойства
Имя	Тип	По умолчанию	Описание
`events`Проп	`NuiSchedulerEvent<T>[]`	`[]`	Показываемые события.
`resources`Проп	`NuiSchedulerResource[]`	`[]`	Комнаты, люди или оборудование: строки таймлайна и столбцы дня и недели.
`view` `defaultView` `onViewChange`Состояние	`'month' \| 'week' \| 'day' \| 'agenda' \| 'timeline'`	`'week'`	Показанный вид.
`views`Проп	`NuiSchedulerView[]`	`all`	Виды, между которыми можно переключаться. По умолчанию — все, а таймлайн — только при наличии ресурсов.
`timelineSpan`Проп	`'day' \| 'week' \| 'month'`	`'day'`	Что показывает таймлайн: день по слотам или неделю либо месяц по дням.
`date` `defaultDate` `onDateChange`Состояние	`NuiDate`	`today`	Показанный день; на нём же находится фокус клавиатуры. Если планировщик рендерит сервер, передайте `defaultDate`: у сервера может быть другое «сегодня», чем у читателя.
`slotMinutes`Проп	`number`	`30`	Минут в строке временной сетки или в столбце таймлайна дня.
`snapMinutes`Проп	`number`	`slotMinutes`	Шаг, с которым события переносятся и меняют длительность.
`dayStart, dayEnd`Проп	`number`	`0, 24`	С какого и до какого часа показывается временная сетка.
`scrollHour`Проп	`number`	`8`	Час, с которого открывается временная сетка.
`agendaDays`Проп	`number`	`30`	Сколько дней вперёд охватывает повестка дня.
`businessHours`Проп	`NuiSchedulerHours[]`		Рабочие часы, например `{ days: [1, 2, 3, 4, 5], start: '09:00', end: '17:00' }`. Остальное время затеняется.
`weekends`Проп	`boolean`	`true`	Показывает выходные. Без него все виды скрывают выходные дни, принятые в локали.
`weekNumbers`Проп	`boolean`	`false`	Показывает номера недель по ISO — в месяце и над столбцом времени.
`editable`Проп	`boolean`	`false`	События можно переносить и менять их длительность — указателем и с клавиатуры.
`selectable`Проп	`boolean`	`false`	В сетке можно выбирать время, чтобы создавать события.
`allow`Проп	`(time) => boolean`		Решает, можно ли перенести событие, изменить его длительность или выбрать время.
`toolbar`Проп	`boolean \| ((toolbar: NuiSchedulerToolbar) => ReactNode)`	`true`	Показывает панель инструментов или, если передана функция, рисует вашу по полученным данным.
`firstDay`Проп	`1 … 7`		Первый день недели, 1 — понедельник. По умолчанию — как в локали.
`headingLevel`Проп	`number`	`2`	Уровень заголовка; дни в повестке дня — на уровень глубже.
`locale`Проп	`string`	`'en-US'`	Форматирует дни и время.
`labels`Проп	`Partial<NuiSchedulerLabels>`		Все показываемые и озвучиваемые планировщиком тексты — для перевода.
`corners`Проп	`NuiCorners`		Форма углов: `round`, `squircle`, `bevel`, `scoop`, `notch` или `square`.
`radius`Проп	`NuiRadius`		Радиус скругления углов: `none`, `small`, `medium`, `large` или `full`.
`density`Проп	`NuiDensity`		Сколько места занимает компонент: `compact`, `regular` или `roomy`.
`renderEvent`Рендер-проп	`(event, { time }) => ReactNode`		Своя отрисовка событий: из события и его времени в виде текста.
`renderResource`Рендер-проп	`(resource) => ReactNode`		Своя отрисовка заголовков ресурсов.
`onEventClick`Колбэк	`(event: NuiSchedulerEvent<T>) => void`		Вызывается с событием, по которому кликнули или которое открыли клавишей Enter.
`onEventChange`Колбэк	`({ event, start, end, resource? }) => void`		Вызывается с новым временем события после переноса или изменения длительности, а если менялись ресурсы — и с ними. Чтобы сохранить изменение, обновите `events`.
`onSlotSelect`Колбэк	`({ start, end, allDay, resource? }) => void`		Вызывается с выбранным в сетке временем и его ресурсом.
`onRangeChange`Колбэк	`({ start, end }) => void`		Вызывается с первым и последним показанными днями, когда они меняются, — чтобы загрузить их события.
`ref`Проп	`Ref<NuiSchedulerHandle>`		Что доступно через `ref` планировщика: листание страниц — для своей панели инструментов.
`previous, next, goToday`Метод	`() => void`		Показывают предыдущую или следующую страницу либо сегодняшний день — для своей панели инструментов.
`title`Свойство	`string`		Показанный период — так, как он записан в заголовке панели инструментов.

Состояние работает как у полей ввода в React: передайте значение и обновляйте его в колбэке on…Change или передайте значение default…, и его будет хранить компонент.

Если проп настройки не задан, компонент берёт его значение из ближайшего атрибута data-nui-*. Подробнее — в руководстве по настройке.

NuiSchedulerToolbar

Что получает функция toolbar, чтобы нарисовать свою панель инструментов.

NuiSchedulerToolbar: Свойства
Имя	Тип	Описание
`title`Свойство	`string`	Показанный период — так, как он записан в заголовке панели инструментов.
`view, views`Свойство	`NuiSchedulerView, NuiSchedulerView[]`	Показанный вид и доступные виды.
`setView, previous, next, goToday`Метод	`(view?) => void`	Переключают вид, показывают предыдущую или следующую страницу либо сегодняшний день.

NuiSchedulerEvent

Событие. Конец события со временем в него не входит, а конец события на весь день — это его последний день.

NuiSchedulerEvent: Свойства
Имя	Тип	По умолчанию	Описание
`id, title`Свойство	`string`		Ключ события и показываемый текст.
`start, end`Свойство	`NuiDateTime \| NuiDate`		Дата и время или, для событий на весь день, только даты.
`allDay`Свойство	`boolean`		По умолчанию — да, если в `start` нет времени.
`tone`Свойство	`'accent' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'accent'`	Его палитра.
`color, class`Свойство	`string`		Любой цвет CSS, который перекрывает тон, и классы для оформления.
`resource`Свойство	`string \| string[]`		Ресурсы, к которым относится событие.
`rrule`Свойство	`string`		Правило повторения по RFC 5545, например `FREQ=WEEKLY;BYDAY=MO`.
`exdate`Свойство	`string[]`		Начала экземпляров, которых не будет.
`recurrenceId`Свойство	`NuiDateTime \| NuiDate`		У экземпляра, о котором сообщает планировщик: начало, которое дало ему правило.
`editable`Свойство	`boolean`		Можно ли переносить это событие, независимо от настройки планировщика.
`data`Свойство	`T`		Любые другие данные, которые нужно хранить вместе с ним.

NuiSchedulerResource

Комната, человек или оборудование, к которым относятся события.

NuiSchedulerResource: Свойства
Имя	Тип	Описание
`id, title`Свойство	`string`	Ключ ресурса и показываемое имя.
`tone, color`Свойство	`NuiSchedulerTone, string`	Цвета его событий, если у них нет своих.
`businessHours`Свойство	`NuiSchedulerHours[]`	Когда ресурс доступен — вместо рабочих часов планировщика.
`data`Свойство	`R`	Любые другие данные, которые нужно хранить вместе с ним.

Helpers

Функции для повторяющихся событий и файлов iCalendar.

Helpers: Свойства
Имя	Тип	Описание
`nuiSchedulerOccurrences`Метод	`(event, first, last) => NuiSchedulerEvent[]`	Событие так, как оно показывается в заданные дни: у повторяющегося — каждый экземпляр.
`nuiSchedulerRule`Метод	`(text: string) => NuiSchedulerRule \| null`	Читает правило повторения или возвращает null.
`nuiSchedulerToIcs`Метод	`(events, options?) => string`	Записывает события в файл iCalendar.
`nuiSchedulerFromIcs`Метод	`(text, { timeZone? }) => NuiSchedulerEvent[]`	Читает события из файла iCalendar, приводя их время к одному часовому поясу.