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.
DOM + CSS0 deps1 file · 26 KB TSXreduced-motion aware
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
// ---------------------------------------------------------------
}Details
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.
