Wedding Planner Date Check Profile Block for React

Edit the constants at the top. BOOKED lists the dates that are taken and HELD the dates held for someone, each with the last day of the hold. MONTH_IDS lists the months the calendar can show, seasonOf says which months are peak, shoulder or off-peak and what each adds, and PACKS lists the packages with their base price. The state of each date, the free Saturdays in view, the days left on a hold and every price are worked out from those, so nothing is typed twice. AS_OF is the day the page treats as today.

A booked date is struck through on a muted cell, a held date is outlined and carries a clock, and a free date is plain; the picked date is solid. The same words are in each date's name for a screen reader ("Saturday 5 June 2027, held until 14 October") and in the answer. The booked and held dates stay pressable, so the answer can explain them instead of the date just being greyed out.

Nothing leaves the page. On a free or held date it says Asked in this demo, nothing was sent, in the status line. On a booked date the button is marked aria-disabled and pressing it says to pick another date. To make it real, send the date and the package to your own API in the submit handler, and show its answer in the same status line.

Each month is a native table with a caption and column headings, and every date is a button named with its full date and state, pressed when it is the picked date. Each month is one tab stop and arrow keys move between its dates. The packages are a radio group, disabled on a booked date. The status line is a polite live region present from the start. Dates keep their left-to-right order in a right-to-left layout.

One month shows instead of two, the answer sits above the three package cards, and the cards stack. Every month is six weeks tall, so moving the window changes nothing below it. The foot stays pinned to the bottom of the screen while the panel scrolls, and settles at the panel's end from the medium breakpoint.