Build a booking app for fixed appointments

Let visitors select a service and time, then inspect the appointment schedule in one place.

Imagine a barber checking messages between haircuts. One person wants a trim tomorrow, another asks for the same afternoon slot, and a third has not said which service they need. The booking task starts well before anyone sits in the chair: agree on a service, a date, and an available time.

A booking app fits when those choices can come from a defined schedule. Start with a small, explicit appointment model. A shop with one chair and fixed slots has different rules from a team whose services take different lengths of time.

The short version

Define your services, appointment times, time zone, and capacity rule. Ask for a slot picker and an operator's appointment list. Make a sample booking and inspect the occupied slot. Test conflicting bookings and check record permissions before sharing your app.

State the capacity rule in the request

Describe what makes a slot unavailable, how the visitor identifies themselves, and what the operator needs to see. Here is a fictional one-chair example:

Markdown
Build a booking app for an illustrative one-chair barbershop.
Offer Haircut and Beard trim services in fixed 45-minute appointments.
Show the next seven days, with slots from 10:00 to 17:00
in Europe/London time. Close Sundays.
Let visitors choose a service, day, and open time, then add their name
and a short note. Show a confirmation summary after booking.
Allow one booking per slot and show occupied times as unavailable.
Give the operator a chronological appointment list.
Use sample bookings for the draft and keep external calendars separate.

Replace the opening hours, time zone, and service rules with your own. For creation, sharing, and collection permissions, see Build a live app on your canvas. This prompt describes the behavior you want to test; it does not guarantee the exact example below.

Try the barbershop example

The example has a service picker, a day strip, time slots, and a booking roster. It makes occupied slots visible while you choose an appointment.

Open in new tab
A barbershop appointment picker with services, available times, and a booking roster

Sample data. Reloading resets your changes.

Try two scheduling actions:

  1. Choose a service and day, select an open time, and make a booking with a made-up name. Find the appointment in the roster.
  2. Return to that day and inspect the occupied time. Compare it with an open slot and check that the taken slot cannot be selected.

This preview uses disposable sample data, and changes reset on reload. It does not reserve a real appointment, send a confirmation email, or synchronize with an external calendar. Names visible in the sample roster illustrate the operator's view; decide who should see booking records in your own app.

Clarify the operator's next decision

A useful follow-up addresses how the shop works after a booking lands:

Markdown
Add a service filter to the operator's appointment list and show each
service's duration beside the booking. Keep all existing appointments.
Show an empty-state message when no appointments match the filter.

Before relying on your own app, test two attempts to book the same slot, the first and last slots of the day, and a closed day. Confirm the displayed time zone and what happens after cancellation. Inspect collection permissions so visitors do not gain unintended access to other people's details. If the team must negotiate timing before accepting work, an order-request form may fit better than immediate booking.

Give feedback

Was this article helpful?