Booked Dates Wedding 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 your own call (your enquiries inbox, a CRM or a form endpoint): details holds the date, the guests, the venue style, the name and the email. The confirmation only repeats what was sent and promises no reply time.

The calendar never names a month or a year. When the block loads in the browser it reads today's date and works out the days a visitor may book (from eight weeks away to two years away) and the month to open on (about ten months ahead), so the page always shows a current diary; until then it keeps the calendar's space empty so nothing jumps. Which days are booked comes from booked, a made-up diary that gives the same answer for the same date every time: Saturdays fill first, then Fridays and Sundays, and summer fills sooner. Replace booked with your own bookings. NOTICE, DIARY and OPENS set the three windows.

SEASONS lists each season's name, months, and an example price for venue hire. The cell for the season of the chosen date gets a rule across its top and aria-current, and the chosen date is written out with a season badge under the calendar. The prices are examples, and the form says so beside the button.

The form has noValidate, so the block shows its own messages. On submit, problems checks that an open date is chosen, the guests are between 10 and 250 and fit the venue style chosen (the barn holds 150, the ballroom 200, the garden 250), a venue style is picked, and the name and email are filled in (the email needs an @ and a domain). Each problem appears under its field with an icon, and focus moves to the first one, which can be the calendar. Choosing a date, a style or typing clears its message.

The date is stored as plain year-month-day text, so the form reads the same on every target. The calendar is React Day Picker's: booked days are disabled with a line through them, and the chosen day is drawn in the foreground colour.

Below lg the split stacks: the season band as three short cells (the price drops its first word), the calendar centred, then the fields under it, each part opened by a rule with + marks. The three venue styles go one per row below sm, and the submit button goes full width. Nothing scrolls sideways at 320 pixels. The header and the band fade up once on load; with reduced motion they simply appear.