shadcn.io is not affiliated with official shadcn/ui
Availability Picker Calendar Block for Ark UI
A weekly hours grid of seven days by nine hours where you paint availability by dragging, toggle one hour with Space, switch whole days and read the week back as ranges and a total.
Installation
Overview
Let someone say when they can be booked, with this availability picker for React with Ark UI. A hairline frame with a plus mark on each corner holds a grid of seven days by nine one-hour cells, 09:00 to 18:00, each cell a toggle. Press on a cell and drag across others with a mouse to paint them all with the first cell's new state; with the keyboard the arrow keys move between cells, Home and End jump to the ends of a day and Space turns one hour on or off. A Switch on each day clears it or gives it a split shift with a break at noon. Under the grid each day is read back as merged ranges ("09 to 12, 13 to 16") with its hours, and the week as a total ("30 h a week"). The Shine Button Save changes is held until something changes and then says "Saved in this demo"; Reset puts the saved week back. The grid scrolls sideways on a phone under a sticky day column. It's built from Switch, Button, Shine Button and Guides with a hand-built grid, and a CSS entrance only. For booking-page settings, working hours and any form that collects a repeating week.
FAQ
How does painting by dragging work?
Pressing a cell with a mouse or pen turns it on or off and remembers that new state; moving over other cells while the button is held sets them to the same state, so one sweep never flips cells back and forth. Releasing anywhere ends the sweep. Touch screens tap one cell at a time, so the grid can still scroll sideways under a finger.
How do I use it with the keyboard?
The grid is one tab stop. The arrow keys move between hours and days, Home and End go to the first and last hour of a day, and Space or Enter turns the focused hour on or off. Each cell is a button named with its day and hour ("Monday 09:00 to 10:00") and pressed when it is on.
How is the week stored and read back?
As one string of 63 characters, nine per day, Monday first, where 1 is on. SAVED_WEEK is the typed starting week. The ranges, the hours per day and the weekly total are all worked out from that string by small helpers, so the summary can never disagree with the grid. Edit HOURS, FIRST_HOUR and SPLIT_DAY to change the day length or the default shift.
Why does Save wait for a change?
There is nothing to save until the grid differs from the saved week, so the button is held (aria-disabled, still focusable) and says "No changes to save." if pressed. Unsaved work is counted in the status line ("3 hours changed, not saved yet.") so nobody leaves with a half-painted week.
What stays local, and how do I wire it up?
Everything. Save keeps the week in the page and says "Saved in this demo"; nothing is sent, and a reload restores the typed week. To make it real, load your saved hours into SAVED_WEEK and send the string from save to your API together with the time zone; the hours here are described as UTC+1 and are not converted.