Day Schedule

Pro

One day as a vertical hour grid, with events sized by duration and overlaps split into columns. Hold and drag to add, move or resize events, with an all-day row and a line that follows the clock.

Preview

Installation

npx @lumioui/cli add pro/day-schedule

Usage

import { formatScheduleTime, formatScheduleRange, layoutScheduleColumns, DaySchedule } from "@/components/ui/day-schedule/day-schedule";
<DaySchedule />

Also exported: formatScheduleTime, formatScheduleRange, layoutScheduleColumns.

Examples

Interview slots

The candidate side of an interview invite.

Calendar day

A calendar app's day view you edit by hand.

Time blocking

A time-blocking planner.

Clinician day

A clinician's day in a virtual-care app.

API reference

Prop Type Default
events* ScheduleEvent[] —
date Date

The day shown. Default today. Events on other days are ignored.

 —
startHour number

First hour on the grid (0–23). Default 7.

 7
endHour number

Last hour line (1–24). Default 21.

 21
hourHeight number

Height of one hour in pt. Default 64.

 64
viewportHeight number

Total height, all-day row included — the grid scrolls inside it. Default 520.

 520
initialScrollHour number

Hour to scroll to on mount. Default one hour before now on today, else startHour.

 —
now Date

Pin the clock (screenshots, demos). Default the live time.

 —
showNowLine boolean

Show the now-line on today's grid. Default true.

 true
selectedId string | null

Selected event id. Controlled.

 —
defaultSelectedId string | null null
onSelectedChange (id: string | null) => void —
onEventPress (event: ScheduleEvent) => void

Tap on an event (grid or all-day row) — open its detail here.

 —
onCreate (range: ScheduleRange) => void

Enables hold-and-drag on open time to draw a new block. Called on release with the drawn range.

 —
createMinutes number

Length of a freshly drawn block before you drag it, in minutes. Default 30.

 30
createLabel string

Label on the block being drawn. Default "New event".

 "New event"
draggable boolean

Hold-and-drag to move blocks (needs onEventMove). Default true when onEventMove is set.

 —
onEventMove (id: string, range: ScheduleRange) => void

Called on drop with the moved range — apply it to events.

 —
onEventResize (id: string, range: ScheduleRange) => void

Enables the edge handles on the selected block. Called on release with the resized range.

 —
canDrop
(range: ScheduleRange, id: string … (range: ScheduleRange, id: string | null) => boolean | string

Extra drop rule for moves, resizes and new blocks (id is null for a new one). Return false or a short reason ("Office closed") to refuse.

 —
snapMinutes number

Grid step for every edit, in minutes. Default 15.

 15
hourFormat "12h" | "24h"

"12h" ("2 PM") or "24h" ("14:00"). Default "12h".

 "12h"
allDayLabel string

Label in the all-day row's gutter. Default "all-day".

 "all-day"
renderEvent
(event: ScheduleEvent … (event: ScheduleEvent, info: ScheduleEventInfo) => React.ReactNode

Replace a block's content (keep the surface).

 —
className string —