Bookings
The booking picker is what your customers see when they book: a service, then who with - or anyone available - then a day and a time, their details, and a confirmation with a reference and a calendar file to add. The free times are worked out in the page from each person's working hours and days off, the length of the service, the buffers before and after it, how far ahead and how soon it can be booked, and the times already taken.
Times are shown in the customer's zone or any other they choose, even when the person they are seeing works in a third. Group classes show the places left; a full day offers the waiting list; a booking can be moved or cancelled from the same element. Your page answers each request from its own server - the element only asks.
A physiotherapy clinic
Five services, three physiotherapists in Leeds and one who works by video from New York, a Pilates class with six places, and three weeks of times already taken. Book something - the page answers with a reference after a short pause - then move it, or pretend someone else got the time first.
// The element asks; your server decides. Hold the request, answer when the server has.
picker.addEventListener('bmxBook', async event => {
event.preventDefault();
const response = await fetch('/api/bookings', { method: 'POST', body: JSON.stringify(event.detail) });
if (response.ok) picker.completeBooking(await response.json()); // { reference, id }
else picker.failBooking(await response.text(), { slotTaken: response.status === 409 });
});
Meeting rooms by the hour
The same element for rooms rather than people: a co-working space with four rooms of different sizes, booked for an hour, a half day or a day, with catering asked for in the form. The wording is the page's own - "Which room?" rather than "Who would you like to see?".
Get the code
<script src="/assets/bmx-components.min.js"></script> <bmx-booking id="bk-rooms" label="Book a room at Foundry Works" now="2026-10-19T08:30:00+01:00" time-zone="Europe/London" locale="en-GB" style="inline-size: 100%"></bmx-booking>