Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA week-by-hour grid where people paint the times they are available by dragging or with the keyboard, with day toggles and disabled cells.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it to collect weekly availability: when a candidate can interview, when a volunteer can help, which shifts staff can work. It scales to 7 days by 12 to 24 rows.
For opening hours with explicit start and end times use business-hours-editor.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | string[] | [] | Cells as "1@09:00": weekday, @, start time. |
| onValueChange | (value: string[]) => void | - | Sorted cells. |
| startHour / endHour | number | 8 / 18 | Rows from startHour up to endHour. |
| step | 15 | 30 | 60 | 60 | Minutes per row. |
| firstDay | number | from locale | First column. |
| isCellDisabled | (day, time) => boolean | - | Cells that cannot change. |
| hourCycle / locale / label / disabled | - | - | Clock, locale, name, disabled state. |
cellsToRanges(cells, step) merges adjacent cells into { start, end } ranges per weekday, ready to save.
| Keys | Action |
|---|---|
| Arrow keys, Home / End, Page Up / Page Down | Move between cells, to the row ends and to the column ends |
| Space / Enter | Toggles the focused cell |
| Shift + Arrow | Moves and copies the state of the cell you left onto the one you enter (paint) |
| Pointer drag / touch drag | Paints cells on or off, matching the first cell pressed |
grid with columnheader day buttons ("Toggle Monday") and gridcells named "Monday 9:00 AM" with aria-selected; one cell holds the tab stop.aria-disabled and also drawn with a hatch, not only a colour.touch-action: none on the grid, so the page does not scroll while painting; give the grid room to scroll around it.