Booking Slot Picker
Pick a day, then a time. A "book a call" widget for consultants, clinics and agencies, without a third-party embed.
Installation
Full Setup guideInstall the component automatically via Shadcn CLI.
npx shadcn@latest add https://www.grettech.com/api/registry/booking-slot-pickerProps
| Prop | Type | Default | Description |
|---|---|---|---|
startDate | string | - | First bookable day, "YYYY-MM-DD". Defaults to today, worked out in the browser after load; pass it to render days on the server. |
days | number | 21 | How many days can be booked from startDate. |
getSlots | (date: string) => string[] | defaultSlots | Free slots for a day as 24-hour "HH:MM" strings. Return [] for a closed day. The default is weekdays 09:00–17:00 every 30 minutes (exported as defaultSlots). |
value | BookingSelection | null | - | Controlled selection: { date: "YYYY-MM-DD", time: "HH:MM" }. |
onChange | (selection: BookingSelection | null) => void | - | Called when a slot is picked or cleared. |
onConfirm | (selection: BookingSelection) => void | - | Called when the visitor presses the book button. |
hourCycle | 12 | 24 | 12 | Time format. |
locale | string | "en-US" | Locale for day and time labels. |
title | string | "Book a call" | Heading. |
hideTimeZone | boolean | false | Hides the time zone note. |
className | string | - | Extra classes for the card. |
...props | React.HTMLAttributes<HTMLDivElement> | - | Any other attributes, passed to the card. |