Timezone and Calendar Settings Block for React

Edit the constants at the top. SAVED holds the seven days (Monday first) as an open flag and the minutes after midnight at which the day opens and closes, plus your zone, the guests' zone and the day the week starts on. ZONES lists the time zones the two selects offer by their IANA names. The track widths, the totals and the converted times are all worked out from those, so nothing is typed twice.

By the browser's Intl.DateTimeFormat, from the zone names, not from fixed offsets. The sentence converts the first open day's hours on one fixed week (the week of 12 October 2026), so it follows each zone's real rules for that week: Lisbon and Berlin differ by an hour then, and the offsets in the select labels are those of the same week. A week in which one zone has changed its clocks and the other has not would read differently, and this block does not show that.

Each track is drawn from the day's start and end, so it moves as soon as a select changes, and the closed switch empties it and disables the selects without moving anything. The selects count in half hours, and the end can reach 24:00. If you move a start to or past the end, or an end to or before the start, the other end moves an hour so the span stays valid, and the status line says where the day now runs. Copy Monday to weekdays copies Monday's hours, or its closed state, to Tuesday through Friday and leaves the weekend alone.

Only the order of the rows: choosing Sunday or Saturday turns the seven bars so that day is on top, in the same fixed slots, so the panel keeps its height. The hours stay with their days, and Monday remains the day that Copy Monday to weekdays copies from.

Nothing leaves the page. The block keeps the saved hours and the ones being edited, counts the days and settings that differ and says so in its status line. Save makes the edited copy the saved one and says so in this demo; Discard puts the saved copy back. To make it real, send the hours and zones to your API in the save handler and update the saved copy from the response. Save and Discard are marked aria-disabled rather than disabled while nothing changed, so they keep their place and focus.

Below the medium breakpoint each day is a card: its name and total with the open switch, the bar across the full width, then the two selects side by side labelled Opens and Closes. Every select and switch is named for its day ("Tuesday opens", "Tuesday open"), the tracks are decorative because the selects say the same, and the status line is a polite live region that announces each change.