Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProSeven rows of open or closed switches with one or more time ranges per day, overlap detection and a copy to all days action.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it in settings for a shop, clinic, support desk or any place with weekly hours, including a lunch break (two ranges). "Copy to all days" fills the week from one day.
For painting availability in slots use availability-grid.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | Record<number, { start; end }[]> | {} | Open ranges per weekday (0 = Sunday). A missing or empty day is closed. |
| onValueChange | (value: BusinessHours) => void | - | Called on every change. |
| maxRangesPerDay | number | 3 | Most ranges in one day. |
| defaultRange | { start; end } | 09:00-17:00 | Range added when a day opens. |
| minuteStep / hourCycle / firstDay / locale | - | - | As on the fields. |
findOverlap(ranges) returns the first overlapping pair or null; ranges that only touch (12:00 end, 12:00 start) do not overlap.
| Keys | Action |
|---|---|
| Tab | Each day's switch, its time fields, Remove, Add hours and Copy |
| Space (switch) | Opens or closes the day |
| Time segments | As in time-field |
switch named by the weekday; open ranges are labelled groups ("Monday hours 1") and Remove buttons say which range they remove.role="alert" message and mark the affected fields aria-invalid.