# Day Schedule

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.

> Composed · Pro · Data Display — React Native, Expo Go incompatible (dev build required).

## Install

```bash
npx @lumioui/cli add pro/day-schedule
```

## Import

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

## Variants

- `booking` — Interview slots: `npx @lumioui/cli add pro/day-schedule-booking`
- `calendar` — Calendar day: `npx @lumioui/cli add pro/day-schedule-calendar`
- `planner` — Time blocking: `npx @lumioui/cli add pro/day-schedule-planner`
- `telehealth` — Clinician day: `npx @lumioui/cli add pro/day-schedule-telehealth`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `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. |
| `endHour?` | `number` | Last hour line (1–24). Default 21. |
| `hourHeight?` | `number` | Height of one hour in pt. Default 64. |
| `viewportHeight?` | `number` | Total height, all-day row included — the grid scrolls inside it.  Default 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. |
| `selectedId?` | `string | null` | Selected event id. Controlled. |
| `defaultSelectedId?` | `string | 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. |
| `createLabel?` | `string` | Label on the block being drawn. Default "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 | 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. |
| `hourFormat?` | `"12h" | "24h"` | "12h" ("2 PM") or "24h" ("14:00"). Default "12h". |
| `allDayLabel?` | `string` | Label in the all-day row's gutter. Default "all-day". |
| `renderEvent?` | `(event: ScheduleEvent, info: ScheduleEventInfo) => React.ReactNode` | Replace a block's content (keep the surface). |
| `className?` | `string` | — |

Source: https://lumioui.com/components/day-schedule