Playground — kloq React calendar

The props that change how the calendar draws, each on a knob. The snippet under the calendar rewrites itself as you flip them — copy it out when it looks right.

liveplaygroundnothing is saved

flip a knob, copy the snippet

Mon21

Tue22

Wed23

Thu24

Fri25

Sat26

Sun27

All-day

props

defaultView

Uncontrolled starting view. Ignored when view is set.

density

Hour height, event type size and padding together.

zoom4

Live zoom as an index into ZOOM_STEPS (0–10; 4 = 100%).

dayStartHour0

First hour the grid draws (0–23); with dayEndHour this clips the day.

dayEndHour24

Last hour the grid draws (exclusive).

snapMinutes

Drag and keyboard snap grid.

weekStartsOn

0 = Sunday … 6 = Saturday.

workingHours

Working-hours tint boundaries; false disables the tint.

showWeekNumbersISO 8601 week numbers in the gutter corner (time-grid views).

locale

BCP 47 tag for every date and time label.

hour12

Force a 12- or 24-hour clock; omit and the locale decides.

timeZones

Extra gutter zone columns, in order.

navigationKeys

What ←/→ move by. PageUp/PageDown always step the range.

calendar.tsx

<Kloq>  <Kloq.Toolbar /></Kloq>

Every knob here is a plain prop on <Kloq>; the deeper surfaces — controlled state, slots, themes, the command registry — get their own pages, several with smaller playgrounds of their own.