The week ahead
Loading schedule…
Scheduler
Plans events in agenda, week, or month views with date navigation and accessible rescheduling.
Preview
Loading schedule…
In action
When to use
Use it for
- An event collection in agenda, week, or month views, using a named timeZone or the browser zone.
- Selecting a new event time or rescheduling while preserving duration.
Not for
- Recurrence expansion or conflict enforcement; prepare those in the application.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { Scheduler } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/scheduler.
2. Vendor the source
npx @noorddev/vlak-cli add scheduler
The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/scheduler.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { Scheduler } from "@noorddev/vlak-react";
<Scheduler events={events} defaultValue={new Date("2026-09-07T12:00:00Z")} timeZone="Europe/Amsterdam" defaultView="week" onSlotSelect={createEvent} onEventSelect={openEvent} onEventMove={rescheduleEvent} />Props
Scheduler
Agenda, week, and month planning in an explicit or browser-local zone. Mutations are callbacks.
| Prop | Type | Default | Description |
|---|---|---|---|
eventsrequired | readonly SchedulerEvent[] | ||
value | Date | ||
defaultValue | Date | ||
onValueChange | (day: Date) => void | ||
view | SchedulerView | ||
defaultView | SchedulerView | "week" | |
onViewChange | (view: SchedulerView) => void | ||
onEventSelect | (event: SchedulerEvent) => void | ||
onSlotSelect | (start: Date) => void | ||
onEventMove | (event: SchedulerEvent, next: { start: Date; end: Date; }) => void | ||
weekStart | 0 | 1 | 1 | |
locale | string | "en" | |
timeZone | string | IANA zone, for example Europe/Amsterdam. Defaults to the browser zone. | |
label | string | "Schedule" | |
disabled | boolean | false |
Also accepts Omit<HTMLAttributes<HTMLDivElement>, "defaultValue">.
Keyboard
| Keys | Does |
|---|---|
| Tab, Enter, Space | Operates date navigation, event buttons, scheduling actions, and view selection. |
| Escape | Closes the rescheduling dialog and returns focus to the triggering action. |
Accessibility
- Month view is a native table with weekday headers.
- Week columns and navigation are named; native date and time inputs retain platform behavior.
- Rescheduling uses a named native dialog and announces the new time.
- Event Date values and callbacks are instants; date and time inputs use the displayed zone. Invalid intervals and nonexistent daylight-saving times are rejected. Repeated times choose the earlier occurrence.
- Server rendering uses a stable loading shell until hydration so browser time zones and the current date cannot cause a hydration mismatch.
Markup
<div class="rs-scheduler" role="region" aria-label="Schedule"><h3 class="rs-scheduler-title">Monday, 7 September</h3><ol class="rs-scheduler-list"><li class="rs-scheduler-event"><span>Review</span><span class="rs-scheduler-time">09:00–09:30</span></li></ol></div>
Classes
.rs-scheduler.rs-scheduler-toolbar.rs-scheduler-action.rs-scheduler-title.rs-scheduler-scroll.rs-scheduler-week.rs-scheduler-date.rs-scheduler-month.rs-scheduler-weekday.rs-scheduler-list.rs-scheduler-event.rs-scheduler-event-button.rs-scheduler-time.rs-scheduler-empty.rs-scheduler-form.rs-scheduler-day.rs-scheduler-selected.rs-scheduler-cell.rs-scheduler-outside