Availability Picker

Preview in your theme

① Main case · mode="paint" (default), days=the full week, 8:00–20:00, slotMinutes=30 — press on a cell and drag: if the cell you started on was unselected you paint, if it was selected you erase, the whole stroke follows, and onValueChange is committed once on release. The “N slots selected · Xh” line at the top counts live (drag draft included); below it is the real controlled value.

11 slots selected · 5h 30m

Mon

Tue

Wed

Thu

Fri

Sat

Sun

08:00

08:30

09:00

09:30

10:00

10:30

11:00

11:30

12:00

12:30

13:00

13:30

14:00

14:30

15:00

15:30

16:00

16:30

17:00

17:30

18:00

18:30

19:00

19:30

Merged into contiguous ranges (consumer-side)

Mon09:00–11:30
Wed14:00–16:00
Thu09:30–10:30

value (day key → slot start, minutes from midnight)

{
  "mon": [540, 570, 600, 630, 660],
  "wed": [840, 870, 900, 930],
  "thu": [570, 600]
}

② Contrast · mode="toggle" + slotMinutes=60, 9:00–17:00 — no drag state machine: each press flips one cell and commits immediately. Right for touch-first products, or when a cell is an independent booking. Day and time headers stay clickable (select a whole day / time slot).

3 slots selected · 3h

Mon

Tue

Wed

Thu

Fri

Sat

Sun

09:00

10:00

11:00

12:00

13:00

14:00

15:00

16:00

③ heatmap · availability density across 12 teammates, 9:00–18:00 — the darker the tint, the more people are free (bg-primary/5 → /40, legend top right; lunch and the weekend go visibly pale). Density is only a background: your own selection still sits on top with a border, so the two never blur together.

3 slots selected · 1h 30m

FewerMore · peak 12

Mon

Tue

Wed

Thu

Fri

Sat

Sun

09:00

09:30

10:00

10:30

11:00

11:30

12:00

12:30

13:00

13:30

14:00

14:30

15:00

15:30

16:00

16:30

17:00

17:30

④ disabledSlots · lunch 12:00–13:00 and the whole weekend are blocked (hatched cells) — they cannot be pressed, a drag skips over them (the stroke breaks across them and resumes after), and selecting a whole day / time slot from a header leaves them out, which is why clicking a weekend header does nothing at all.

7 slots selected · 7h

Mon

Tue

Wed

Thu

Fri

Sat

Sun

08:00

09:00

10:00

11:00

12:00

13:00

14:00

15:00

16:00

17:00

18:00

19:00

⑤ readOnly display state — published office hours: the pointer does nothing at all (no hover, no painting, dead headers), yet the grid is still walkable by keyboard and every cell announces “Wed 14:30, selected”. The key matrix below applies to every editable grid above (①②③④).

31 slots selected · 15h 30m

Mon

Tue

Wed

Thu

Fri

Sat

Sun

08:00

08:30

09:00

09:30

10:00

10:30

11:00

11:30

12:00

12:30

13:00

13:30

14:00

14:30

15:00

15:30

16:00

16:30

17:00

17:30

Tab: the grid is a single stop (roving tabindex) — press it again to leave
↑ ↓ ← →: move focus between cells; stepping past the first row / column lands on the day / time header
Space / Enter: toggle the focused cell; on a header, select or clear the whole column (a day) / row (a time slot)
Shift + arrows: extend the focused cell's state to the next one — hold Shift and keep pressing to paint or erase a run
Home / End: jump to the first / last day in this row

Loading preview…

This component is part of Pro

The install command, prompt and concept map are included with a Pro license — one purchase unlocks every Pro component, forever.

Unlock with Pro