The calendar checks availability before you click
The consultation picker does not wait for you to pick a date before checking whether I am free. As soon as the calendar renders, it starts hitting the availability API for every future weekday in the visible month — four dates at a time, in parallel batches. Dates blur until the response comes back. If a day has zero slots, it gets a strike-through and becomes unselectable. If a day has slots, the blur lifts and the button activates. By the time you have scanned the calendar, most dates are already resolved. The API behind it queries Google Calendar's freebusy endpoint for the requested day, generates every possible 45-minute slot in 15-minute increments between 9am and 5pm UK time, then filters out anything that overlaps an existing event. The overlap check is two comparisons — slotStart < busy.end && slotEnd > busy.start. That covers every case: partial overlaps, events that start mid-slot, events that contain the entire slot. Weekends are excluded at the component level — the grid is five columns, Monday to Friday. Past dates are excluded at the API level — the effective start time is either the beginning of business hours or right now, whichever is later. The whole thing uses a cancelled flag in the useEffect cleanup so switching months does not cause stale state updates. One calendar component, one API route, one freebusy query per date, and the client never has to pick a day only to find out I am booked solid.
Comments coming soon
Sign in with TikTok to leave a comment. Coming soon.