The calendar only shows weekdays because weekends do not exist in this booking system
The booking calendar on every service page renders a five-column grid. Not seven. Five. Monday through Friday. The component loops through every day of the month, checks the day of the week with getDay, and skips any day that returns zero or six. Saturday and Sunday never make it into the cells array. They are not greyed out. They are not disabled. They do not exist in the DOM. A client looking at the calendar sees a compact weekday-only layout that communicates availability at a glance without wasting space on days I do not work. The grid is not static. Every future date starts in a blurred state — literally. The CSS class blur-[3px] with sixty percent opacity creates a frosted effect on dates that have not been checked yet. The component fires availability requests in batches of four using Promise.all inside a sequential loop. As each batch resolves, the dates in that batch transition from blurred to sharp over five hundred milliseconds. The effect is progressive revelation — the calendar sharpens from top to bottom as the API responds, giving the client a visual sense of the system working. A date with zero available slots gets a strikethrough and forty percent opacity. A date with slots becomes selectable — the blur lifts, the border appears, the hover scale activates. The whole thing looks like a grid of frosted glass tiles that clear one by one to reveal which days are open. The cancellation pattern is a boolean flag in a closure. When the month changes, the useEffect cleanup sets cancelled to true. Any in-flight fetch that returns after the month switch checks the flag and silently discards its result instead of updating stale state. Four parallel requests, sequential batches, progressive blur reveal, and zero wasted renders for months the client has already left behind.
Comments coming soon
Sign in with TikTok to leave a comment. Coming soon.