Scheduler

Планировщик: день, неделя, месяц и таймлайн ресурсов, drag & drop, повторы. Pro · Работа и команды › Планирование

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add scheduler

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { Scheduler } from 'valyro-ui-pro';

Пропсы

Prop	Type	Default
`events`	`readonly SchedulerEvent[]`		Controlled `events`; use with `onEventsChange`.
`defaultEvents`	`readonly SchedulerEvent[]`		Initial `events` when uncontrolled.
`onEventsChange`	`(events: SchedulerEvent[]) => void`		The whole list after a drag or resize; series occurrences are detached (see `recurringEventId`).
`onEventChange`	`(change: SchedulerEventChange) => void`		The single change behind each `onEventsChange`, with `occurrenceDate` for series occurrences.
`onEventCreate`	`(slot: SchedulerSlot) => void`		Click or drag over empty slots, or Enter on a focused slot. Without it, slots are not creatable.
`onEventClick`	`(occurrence: SchedulerOccurrence, anchor: HTMLElement) => void`		Click or Enter on an event; `anchor` is its element, e.g. for a popover.
`resources`	`readonly SchedulerResource[]`	`[]`	Rows of the timeline view (rooms, people).
`view`	`'day' \| 'week' \| 'workWeek' \| 'month' \| 'timeline' \| 'agenda'`		Controlled `view`; use with `onViewChange`.
`defaultView`	`'day' \| 'week' \| 'workWeek' \| 'month' \| 'timeline' \| 'agenda'`	`'week'`	Initial `view` when uncontrolled.
`onViewChange`	`(view: SchedulerView) => void`		Called with the new `view` when it changes.
`views`	`readonly SchedulerView[]`		Views in the switcher. Default day, week, month, plus timeline when there are resources.
`date`	`Date`		Any date in the shown range.
`defaultDate`	`Date`		Initial `date` when uncontrolled.
`onDateChange`	`(date: Date) => void`		Called with the new `date` when it changes.
`minHour`	`number`	`0`	First visible hour of the day, week and timeline views; events entirely outside the hours are not shown there.
`maxHour`	`number`	`24`	Hour the day, week and timeline views end at (exclusive).
`slotDuration`	`15 \| 30 \| 60`	`30`	Minutes per slot row (and per timeline column).
`snapDuration`	`number`	`15`	Minutes that drags and resizes snap to.
`scrollToHour`	`number`		Hour scrolled into view on mount. Default an hour before the working day starts.
`workingHours`	`SchedulerWorkingHours \| null`	`{ start: 9, end: 17, days: [1, 2, 3, 4, 5] }`	Time outside these hours is shaded; `null` turns shading off.
`weekStartsOn`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6`	`1`	First day of the week, month and agenda views and the mobile day strip: 0 = Sunday, 1 = Monday.
`maxEventsPerDay`	`number`	`3`	Month view: events per day before "+N more".
`mobileView`	`'day' \| 'agenda' \| false`	`'day'`	Below 640px the week, work week and month views render as this view; `false` keeps them.
`readOnly`	`boolean`	`false`	Events stay clickable but cannot be moved, resized or created.
`loading`	`boolean`	`false`	Dims the calendar with a spinner and marks it busy.
`locale`	`string`		Date and time formatting, incl. 12/24-hour clock. Defaults to the `ThemeProvider` locale, then the browser's.
`labels`	`Partial<SchedulerLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Scheduler

Установка

Пропсы

Похожие компоненты