Booking Slot Picker
Pick a day, pick a time, confirm — with honest availability, a real keyboard grid, and a WhatsApp or email request mode for shops with no booking system.
- Category
- Components
- Added
- 2026-09-25
- Deps
- none
- Updated
- 2026-09-25
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Mercer & Sons
Est. 1998
Take a
seat.
14 Mercer StCovent Garden
Books instantly
Book a time
Skin fade
45 min
£28
September 2026
Morning
Afternoon
Your time
Sat 26 Sept
£10 deposit · free to cancel up to 24h before
Props
"use client";
import { useEffect, useRef, useState, useSyncExternalStore } from "react";
/**
* Pick a day, pick a time, confirm — for a barber's chair, a table, a class.
*
* AVAILABILITY IS DATA, AND IT IS SHOWN HONESTLY. Each day says how many times
* are actually free ("4 free"), a taken slot is struck through rather than
* only greyed (so it reads without colour), and a closed day says "Closed".
* Nothing here invents scarcity.
*
* IT WORKS WITH OR WITHOUT A BOOKING SYSTEM. With onConfirm (which may return
* a promise) the button books and shows pending, done and error states. Most
* small shops have no booking backend at all, so requestWhatsApp or
* requestEmail turn the same button into a pre-written request — "Hi, I'd like
* a Skin fade on Fri 26 Sep at 10:30" — which is honest about being a request.
*
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this component
A booking picker is where a small business's website either earns its keep or sends people back to the phone. This one keeps to three honest steps. A strip of days, each saying how many times are actually free — "4 free", "Full", "Closed" — so nobody taps through a fortnight of empty days. A grid of times grouped into morning, afternoon and evening, where a taken slot is struck through rather than just greyed, so it reads without colour. And a bar that opens with the chosen day and time and the button that commits it. That button works three ways. Wired to onConfirm, it books for real, with pending, booked and try-again states. For the many shops that take bookings by message, it becomes "Request on WhatsApp" or "Request by email", with the request already written for them. Days and times are proper radio groups with one tab stop each, arrow keys that skip taken slots, and a live region that says what happened.
Curator’s note
Most barbers and cafés we build for have no booking system at all — they take bookings by WhatsApp. So the same picker either books through your backend or writes the customer a ready-made request.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Date Range Picker
componentsA click-twice range calendar with a live hover preview and quick presets.
Live Hours Nav
componentsA small-business header that says whether the shop is open right now — computed in the shop's timezone, with overnight hours and split shifts handled.
Thumb Action Dock
componentsA phone bottom bar with Call, Directions and Book — that appears once the hero's CTA has gone, and steps aside for the footer, a focused field and the keyboard.