Date Range Calendar Rental Contact Block for React

hireCost charges whole weeks at the week rate (four days' rate, set by WEEK_DAYS) and the days left over at the day rate, never more than a week. Nine days of a 42-dollar tool is one week (168 dollars) plus two days (84), so 252 dollars; delivery adds a flat 40. The figures are examples and the block says so under the band; the deposit is shown beside the rates, held at collection and not part of the total. Change the TOOLS rows, WEEK_DAYS and DELIVERY to match your own price list, or replace hireCost with a call to your quoting service.

Today is read after the block mounts, so the server's render stays the same and no month or year is written into the file. Before that moment no day is closed; afterwards every day before today is unavailable and struck through. The calendar opens on the current month, as the catalog's calendar does, and always draws six weeks so moving between months never changes the block's height.

Choose the first day, then the last; the first day, last day and length are written beside the calendar, and the hire is priced once both are set. For a one-day hire, choose the same day twice. Choosing again after a full range starts a new one. On React Aria the first day is shown only once the second is chosen, because that library reports a range when it is complete; the other bases show the first day at once.

The calendar is the catalog's day picker in range mode, controlled from the block's two days, and closes days with a disabled function.

On every base the chosen days are filled with the foreground colour, never the primary colour, so the button stays the only primary control.

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 hire desk: details, from, to and delivery hold everything the visitor chose. hire@toolhaus.example is on the reserved .example domain and the phone number is in the reserved fictional range.

The bands stack in order: the tool and its rates, the calendar (it stays full width and legible at 320 pixels), then the chosen days and delivery, the price cells two by two, and the details with a full-width button. The form starts under the header, and the price band always sits directly under the calendar.