Centered Demo Schedule Hero Block for React

Edit the two arrays at the top of the file. WEEKDAYS is the day strip: each day's value, its short label on the tile and its long name for screen readers. TIMES is the grid of start times, shown as written. The day and time chosen at first are the component's initial state, wed and 10:30: keep them among the values, or nothing starts chosen.

They're worked out in the browser, from the visitor's own clock: the strip is always next week's Monday to Friday, and the frame's corner shows that week's month and year. A date rendered on the server would go stale, or disagree with the visitor's time zone, so the server HTML shows the weekdays with a dash for each date and Next week in the corner, and the dates fill in as soon as the page loads.

Load the open slots from your availability endpoint in place of TIMES, per day if they differ, and point the Book this slot link at your booking page with the chosen date and time in its query string, or turn it into a button that posts them to your API. The block already keeps the chosen day and time in state and builds the summary from them, so that's where to read them.

The days and the times are two radio groups, named Day and Start time, in your time zone. Tab moves into a group, the arrow keys move the choice, and each option is read in full: Wednesday, October 21, not Wed 21. The headline is the block's one h1. The Book this slot link carries the chosen slot in its accessible name, so it makes sense on its own in a list of links.

The pill is hidden below sm so the scheduler and its button stay on the first screen. The five day tiles share the frame's width down to 320 px, the times stay in three columns, the split divider becomes a rule between the two, and the summary sits above a full-width Book this slot button. A new choice fills with a short color transition, which is turned off under reduced motion.

Use this centered layout when the headline carries the page and booking is the way in, with the scheduler under the message rather than beside it. Use a split calendar booking hero when the calendar deserves as much room as the copy.