Availability Grid
Single-day slot picker with taken slots disabled, the selected slot highlighted, timezone line, and a buffer note.
Single-day slot picker with taken slots disabled, the selected slot highlighted, timezone line, and a buffer note.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Availability Grid is the time-slot picker for a single booking day, Friday Jun 13. Eighteen 30-minute slots run from 9:00 am to 5:30 pm in a two-column grid. Taken slots are rendered disabled and faded; the selected slot at 11:00 am is filled in foreground with the Confirm button beneath it pre-filled. The timezone line reads Slots shown in your timezone (UTC+1), and the footer note makes the integrity guarantee explicit: taken slots are blocked at the source, not hidden by timezone math.
Slots are one flat array with taken and selected flags. The footer copy is the difference between a picker that feels safe and one that invites double-booking anxiety.
Reach for this block as the second step of a booking flow, after the user picks a date. Wire selectedSlot state to your availability endpoint and the Confirm button to your reservation mutation.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the external booking slot picker. Other availability grid uses:
Tip: always state the timezone explicitly next to the slots; silent local-time assumptions are the top support ticket in any booking UI.