Skip to content

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.

Prominimaleditorial
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.

Preview

Mercer & Sons

Est. 1998

Take a
seat.

14 Mercer StCovent Garden

Books instantly

Book a time

Skin fade

45 min
£28

With

September 2026

Morning

Afternoon

Your time

Sat 26 Sept

£10 deposit · free to cancel up to 24h before

Props

12-hour times
Choose a barber
No runtime dependencies
"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
  // ---------------------------------------------------------------
}
Notes

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.

Related

Pairs well with

Matched on shared tags and category — the entries most likely to be used alongside this one.

Pro

A click-twice range calendar with a live hover preview and quick presets.

datecalendarrange
Featured
NewPro

Live Hours Nav

components

A 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.

navigationheaderopening-hours
Featured
NewPro

A 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.

navigationmobilelocal-business