Officina UI
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
August 09 – 15
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

PropTypeDefaultDescription
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.
defaultDateDate—Date the calendar opens on.
defaultViewenumweekCalendar view shown on first render.
minHeightnumber560Minimum 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.
readOnlybooleanfalseDisable drag/resize editing.
resourcesSchedulerResource[]—Resource lanes (people, rooms, machines) — enables resource view columns.
viewsView[]['day', 'week', 'month', 'agenda']Views the user can switch between.

On this page