Calendar - Availability

These blocks are the settings side of a scheduling product. They let someone decide when they can be booked, which calendars to check and how the public booking page looks. Each one keeps a local copy of the data you pass in, so editing never changes your props, and the save buttons only show a toast until you connect them to your API.

Times are plain HH:mm strings and dates are ISO strings. The date overrides block takes a today prop so the demo stays stable.

Style One

Weekly hours editor with a switch for each weekday, one or more time ranges per day, a copy to weekdays action, range validation and a weekly total.

Style Two

Date overrides. Mark a single day as unavailable or give it custom hours, and add common holidays with one click.

Style Three

Calendar connections for Google, Outlook and iCloud with conflict checks, a target calendar for new bookings and a confirmation before disconnecting.

Style Four

Booking page settings with a link and a copy button, duration, buffer and notice selects, a booking window slider, an approval switch and a live preview.