Components
Scheduler
Full event scheduler: day/week/month/agenda views, drag to move, drag edges
Scheduler is a full calendar with day, week, month, and agenda views. Users can
drag events to move them and drag their edges to resize, while clicking an empty
slot fires onSlotSelect for quick creation. State is controlled: pass events
and an onEventsChange handler that persists edits. Set defaultView, restrict
the available views, supply resources for lane-based scheduling, or set
readOnly to disable editing.
Example
Preview
12:00 AM
1:00 AM
2:00 AM
3:00 AM
4:00 AM
5:00 AM
6:00 AM
7:00 AM
8:00 AM
9:00 AM
10:00 AM
11:00 AM
12:00 PM
1:00 PM
2:00 PM
3:00 PM
4:00 PM
5:00 PM
6:00 PM
7:00 PM
8:00 PM
9:00 PM
10:00 PM
11:00 PM
10:00 AM – 11:00 AM
Design review
import { Scheduler } from '@officina/ui';
import { useState } from 'react';
function Calendar() {
const [events, setEvents] = useState([
{ id: 'evt-1', title: 'Design review', start: new Date(), end: new Date() },
]);
return (
<Scheduler
events={events}
onEventsChange={setEvents}
defaultView="week"
onSlotSelect={({ start, end }) =>
setEvents((prev) => [...prev, { id: `evt-${Date.now()}`, title: 'New event', start, end }])
}
/>
);
}API
| Prop | Type | Default | Description |
|---|---|---|---|
| events* | SchedulerEvent[] | — | Events to render on the calendar (controlled). |
| onEventsChange* | (events: SchedulerEvent[]) => void | — | Called with the next events array after a drag, resize, or edit. |
| defaultDate | Date | — | Date the calendar opens on. |
| defaultView | enum | week | Calendar view shown on first render. |
| minHeight | number | 560 | Minimum height of the calendar viewport in px. |
| onEventClick | (event: SchedulerEvent) => void | — | Called when an existing event is clicked. |
| onSlotSelect | (slot: { start: Date; end: Date; resourceId?: string; }) => void | — | Called when user selects an empty slot — create-event hook. |
| readOnly | boolean | false | Disable drag/resize editing. |
| resources | SchedulerResource[] | — | Resource lanes (people, rooms, machines) — enables resource view columns. |
| views | View[] | ['day', 'week', 'month', 'agenda'] | Views the user can switch between. |