Split Calendar Booking Hero Block for React

Edit WEEKDAYS and TIMES at the top of the file. Each weekday has a value, a short name for the strip and a long one for screen readers; drop Friday, say, and the strip shows four days. WEEKS sets how far ahead guests can book, counting next week, and the day and time states start on Wednesday at 10:00 AM. Keep a multiple of three times, so the three-column grid ends on a full row (two columns on the narrowest phones).

From the visitor's own clock, in the browser: the strip always starts on the Monday after today, and the arrows move a week at a time from there. The server can't know the visitor's date or time zone, so it renders the weekdays with a dash for each date and Next week as the heading; the real dates fill in as soon as the page runs, in the same places, so nothing moves.

Load the free times for the week being shown from your scheduling backend, keyed by the week's dates, and pass them in place of TIMES; refetch when the arrows change the week. A day with no free times can be left out of WEEKDAYS, or shown with its item disabled. Point the Book this slot link at your booking flow with the chosen date and time in its address, and keep the guest's time zone in the request.

The page column has Guides bleed marks="top" rules="top": two side rails and one top rule with a plus on each crossing. The frame is Guides extend="sm" marks="corners" on the box around the booking page, so its lines overshoot the corners a little. The text comes first in the source and the booking page takes the first column on wide screens with lg:col-start-1 lg:row-start-1, so reading order and the tab order are the same everywhere. Below lg the booking page sits under a ruled line.

Yes. Each SegmentGroup is a radio group: Tab moves into it, landing on the chosen day or time, the arrow keys move the choice, and Tab moves on. The week arrows are buttons, and the previous one is disabled on next week, the first that can be booked. A visible ring sits outside the chosen day or time when it has keyboard focus.

The booking page is a figure named Booking page. The days are a radio group named Day, each read with its full date (Wednesday, October 21) rather than a lone number, and the times a group named Start time, in your time zone. Changing the week announces the new range once, through a polite live region, and the booking link reads its full slot, Book this slot, Wednesday, October 21 at 10:00 AM. The window's title bar is hidden, and the headline is the block's one h1.

The two columns stack below the lg breakpoint, with the booking page under the copy. The five days keep one row of 32px circles down to 320px, the times stay in two columns below 380px and three above, and the summary and the Book this slot link wrap onto two lines when they don't fit side by side. The headline steps down from text-5xl to text-4xl, and the Shine Button is on the first screen.