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.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
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.