Day Schedule
Calendars
Source and install need .
pnpm dlx shadcn@latest add @assembli/availability-editorAvailability Editor
A weekly hours editor in the Cal.com mould: each day switches on and off and holds one or more time ranges, with inline errors for empty or overlapping ones and a popover that copies a day's hours to the days you tick. A week strip charts the hours on offer with a weekly total, and date overrides picked in a calendar dialog replace a day's hours or block it.
Props
Other props pass through to the root element.
value
Availability
defaultValue
Availability
Default
DEFAULT_AVAILABILITYonChange
(value: Availability, valid: boolean) => void
validis false while any day has an empty or overlapping range.step
number
Default
15Minutes between the times on offer.
weekStart
0 | 1 | 6
Default
10 Sunday, 1 Monday, 6 Saturday.
hourCycle
"h12" | "h23"
Default
"h12"locale
string
Default
"en-US"now
string | number | Date
Today, so overrides can't be set in the past. Pass it so server and browser agree.
container
HTMLElement | null
Renders overlays inside this element instead of the body.
title
React.ReactNode
Default
"Working hours"description
React.ReactNode
Default
"When people can book time with you. Bookings never land ou…
| Description | |||
|---|---|---|---|
| value | Availability | – | |
| defaultValue | Availability | DEFAULT_AVAILABILITY | |
| onChange | (value: Availability, valid: boolean) => void | – |
|
| step | number | 15 | Minutes between the times on offer. |
| weekStart | 0 | 1 | 6 | 1 | 0 Sunday, 1 Monday, 6 Saturday. |
| hourCycle | "h12" | "h23" | "h12" | |
| locale | string | "en-US" | |
| now | string | number | Date | – | Today, so overrides can't be set in the past. Pass it so server and browser agree. |
| container | HTMLElement | null | – | Renders overlays inside this element instead of the body. |
| title | React.ReactNode | "Working hours" | |
| description | React.ReactNode | "When people can book time with you. Bookings never land ou… |
