Booking Calendar
Sourcecomponents/BookingCalendar.astro
The calendar
A Calendly-style booking picker: choose a day in the month grid, then a time from the slots that appear. The choice is written to two hidden inputs (date / time), so it drops straight into any form. Availability comes in as a date→times map; days without slots and the past are disabled, and a dot marks the days that are open.
Switch viewport — it renders at each breakpoint's true size. Pick a day to reveal the slots.
On an image (glass)
With surface="dark" the calendar turns glassmorphic for use on a hero image or a dark section — same behaviour, light-on-dark styling.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
slots | Record<string, string[]> | — | Availability: times keyed by ISO date, e.g. { "2026-09-04": ["09:00","10:00"] }. Days without slots are disabled. |
nameDate | string | 'date' | Name of the hidden input that receives the chosen date. |
nameTime | string | 'time' | Name of the hidden input that receives the chosen time. |
duration | string | '45 min' | Label shown beside the slots. |
tz | string | 'CET' | Timezone label shown beside the slots. |
surface | 'light' | 'dark' | 'light' | 'dark' for the glass version on an image or dark section. |
required | boolean | false | Makes the hidden date/time inputs required in a form. |
In a form
Drop it inside a <form> and read date and time on submit. It also fires a bcal:change event on selection if you want to react live.
<form>
<BookingCalendar slots={slots} surface="dark" required />
<Button type="submit">Book</Button>
</form>