Scheduler

Scheduler: day, week, month and resource timeline, drag and drop, recurrence. Pro · Work and teams › Planning

Installation

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';

Props

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.

Related components

Calendar View — Event calendar
Kanban Board — Task board
Gantt Chart — Gantt charts with dependencies and drag to reschedule
Booking Slots — Meeting booking: calendar, slots in the guest’s time zone, form and confirmation
CRM Pipeline — Deal pipeline: stages, amounts and probabilities, drag between stages
Approval Flow — Multi-stage approvals: sequential and parallel stages, decisions with reasons, history
Goal Tracker — OKRs: objectives and key results, statuses, confidence, check-ins with history
Onboarding Checklist — Onboarding checklist: progress, hints with CTAs, dismissal and celebration
Course Path Navigator — Course map: modules, locks, progress and skills, a list on narrow screens
Team Members — Team members: roles, email invites, pending invitations, seat count
Org Chart — Org chart: zoomable, pannable tree with search and collapsible branches
Activity Feed — Activity feed

Previous: Calendar View · Next: Kanban Board · All Work and teams