Scheduler

Usage

import { useState } from "react";
import { Scheduler, type SchedulerEvent } from "@vesture/react";

function Example() {
  const [date, setDate] = useState(new Date());
  const [events, setEvents] = useState<SchedulerEvent[]>([
    { id: "1", title: "Standup", start: nineAM, end: nineThirtyAM },
    { id: "2", title: "Design review", start: elevenAM, end: noon },
  ]);

  return (
    <Scheduler
      date={date}
      onDateChange={setDate}
      events={events}
      editable
      startHour={8}
      endHour={19}
      onEventChange={(event, newStart, newEnd) =>
        setEvents((prev) =>
          prev.map((e) =>
            e.id === event.id ? { ...e, start: newStart, end: newEnd } : e
          )
        )
      }
    />
  );
}

Behavior

• Fully controlled: events and date are yours to own. Scheduler never mutates events, even while dragging — onEventChange reports the proposed new start/end and you decide whether to accept it, same philosophy as every other component here.
• Overlapping events in the same day cluster and pack into side-by-side columns automatically (a bridging event can link two events that don't directly overlap into one cluster) — no layout props to configure.
• startHour/endHour restrict the visible time range (default the full day, 0-24); slotDuration controls gridline density and is also the snap increment for drag/resize/keyboard moves.
• Events with allDay: true render in a separate row above the time grid and are never draggable or resizable.
• editable turns on drag-to-move (drag anywhere on an event body) and drag-to-resize (drag its bottom edge), both via Pointer Events, so they work uniformly with mouse, touch, and pen.
• Keyboard equivalents, always available when editable: ArrowUp/ArrowDown move a focused event by one slotDuration, ArrowLeft/ArrowRight move it to the adjacent day, Shift+ArrowUp/ArrowDown resizes its end time. Each keypress fires onEventChange immediately and is announced through an aria-live region for screen readers.
• minEventDuration (defaults to slotDuration) is the floor a resize can shrink an event's duration to.
• A dragged event's original slot dims in place while a preview block — showing the live would-be start/end time — follows the pointer; a resize instead live-updates the event's own height and end-time label directly.