Weekly Hours Schedule

ProNew

Opening hours for each weekday, with several time ranges per day, an open or closed switch, overlap and order checks, and "copy to all weekdays". Use this when availability repeats weekly and a day can have a split shift.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

A business, calendar or staff member has weekly hours, possibly split (09:00 to 12:00 and 13:00 to 17:00).

Do not use it when: For one-off date availability or exceptions, use a calendar. This is for the repeating pattern.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`value`, `onChange`	`Week`	`{ mon: [{ start, end }], ... }` with `"HH:MM"` strings. Optional; without them the component keeps its own state.

dayProblems(ranges) is exported for server-side checks.

Accessibility

Each day has a switch named "Monday open" with a visible label; a closed day says "Closed" in text. Each time input is named by day, range number and open or close ("Tuesday range 2 closes").
Order and overlap problems are alerts next to the range, and the closing input is aria-invalid.
Ranges use Field Array (add, remove, announcements). "Copy to Tuesday through Friday" is a button, not a drag gesture.

Testing

The pattern ships with a Testing Library test (weekly-hours-schedule.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

A business, calendar or staff member has weekly hours, possibly split (09:00 to 12:00 and 13:00 to 17:00).

Do not use it when: For one-off date availability or exceptions, use a calendar. This is for the repeating pattern.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`value`, `onChange`	`Week`	`{ mon: [{ start, end }], ... }` with `"HH:MM"` strings. Optional; without them the component keeps its own state.

dayProblems(ranges) is exported for server-side checks.

Accessibility

Each day has a switch named "Monday open" with a visible label; a closed day says "Closed" in text. Each time input is named by day, range number and open or close ("Tuesday range 2 closes").
Order and overlap problems are alerts next to the range, and the closing input is aria-invalid.
Ranges use Field Array (add, remove, announcements). "Copy to Tuesday through Friday" is a button, not a drag gesture.

Testing

The pattern ships with a Testing Library test (weekly-hours-schedule.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.