Month Calendar Scheduler Contact Block for React

Nowhere yet. The submit handler waits 800 milliseconds, as a stand-in for a request, then shows the confirmation. Replace that timer in submit with a call to your calendar or booking API: day, time, name and email hold everything the visitor chose. Show the confirmation when the request succeeds, and an error line in the form when it doesn't.

unavailable closes Saturdays and Sundays and, once the page is in the browser, every day before today. Today is read after the block mounts, so the server's render never goes stale and no month or year is written into the file. The calendar opens on the current month, as the catalog's calendar does. Add your own closed days, such as holidays, to unavailable.

slotsOn filters the half-hour starts in STARTS with a small rule over the chosen date, so each day shows a different set and a taken start never appears. It's example data: in production, ask your calendar for the host's free times on that day and pass them in. The times are one group of radio choices, so arrow keys move between them and the chosen one fills with the foreground colour, never the primary colour.

Until a day and a time are chosen the button is marked aria-disabled and dimmed, and a line beside it says what's missing ("Choose a day to see its open times."). It stays focusable so keyboard and screen reader users can find the reason; pressing it sends focus back to the missing choice rather than submitting.

The calendar is one component built on react-day-picker: weekends and past days go in its disabled list, and the chosen date is a plain date.

The block turns each library's value into the same year, month and day.

Below lg the split stacks: the header, then the form straight away, then the host and what the call covers. The calendar's cells shrink a size under sm, the times wrap to three a row, the name and email go one per row, and the confirm button goes full width, so nothing scrolls sideways at 320 pixels.