Project 77, E-commerce and business

Booking Slot Calendar

The booking page for a salon, clinic or tutor. Choose a service, pick a free slot that fits its length, and add it straight to your calendar.

Main API: Intl.DateTimeFormat
Export: .ics calendar file
Dependencies: None
Your browser: Checking

Book an appointment

Pick a service, a day and a time. Longer services show fewer slots. Times are shown in your own time zone.

1. Choose a service

3. Your details

2. Pick a day and time

How it works

Slots fit the serviceFor each day the script walks from opening to closing time and keeps a start time only if the whole service fits without touching a booked slot.
Local times for everyoneTimes are made with Date and shown with toLocaleTimeString, so each visitor sees them in their own time zone and format.
A real calendar fileThe confirmation builds an ICS file as a data link. Opening it adds the appointment to Google, Apple or Outlook calendars.

for (let m = open; m + length <= close; m += 15) {
  const clash = booked.some(([start, len]) => m < start + len && m + length > start);
  if (!clash) slots.push(m);           // minutes after midnight
}
const ics = `BEGIN:VCALENDAR\r\nVERSION:2.0\r\nBEGIN:VEVENT\r\n` +
  `DTSTART:${utc(start)}\r\nDTEND:${utc(end)}\r\nSUMMARY:Haircut\r\n` +
  `END:VEVENT\r\nEND:VCALENDAR`;
link.href = "data:text/calendar," + encodeURIComponent(ics);