WorkingHours

A WorkingHours component lets users define daily start and end times for availability. It also supports adding multiple break intervals within the availabilty and validates to prevent overlaps or out-of-range times.

Figma Library View in Storybook View in Playroom

Quick Start

Installation: npm install @adaptavant/working-hours
Import: import { WorkingHours } from '@adaptavant/working-hours';

Key Features

A comprehensive time management widget for configuring business availability and break schedules:

Dual-mode operation - Configure working hours or break times with multi-slot scheduling per day. Supports complex schedules like split shifts and multiple availability windows.
Intelligent validation - Real-time overlap detection, error highlighting, and change tracking. Prevents conflicting time slots with immediate feedback and unsaved change notifications.
Flexible time input - Supports multiple formats (9:30 AM, 21:30, 930) with automatic parsing.
Permission & bulk controls - Role-based access with apply-to-all functionality for quick setup. Control add/delete capabilities, time intervals, and bulk day configuration copying.
24 Hours support - Enable permission-based 24-hour scheduling options for round-the-clock availability configuration.
Full internationalization - Customizable labels for UI text, day names, and error messages for multi-language support.

Working Hours Mode

The example displays "Monday to Friday 8 AM to 5 PM" time schedule with weekends off. Demonstrates full permission settings, custom labels, and event tracking setup.

Use componentBaseType prop to define the type of the component (Working hours or Break) and initialWeekDayConfig prop can be used to set the initial time slots for each day.

The prop workingHoursPermisions controls the visibility of the delete and add slot buttons, the apply to all button, the 24 hour slot option and the time picker interval.

<WorkingHours
	componentBaseType="workingHours"
	initialWeekDayConfig={{
		MO: { hours: [{ start: 480, end: 1020 }], breaks: [] },
		TU: { hours: [{ start: 480, end: 1020 }], breaks: [] },
		WE: { hours: [{ start: 480, end: 1020 }], breaks: [] },
		TH: { hours: [{ start: 480, end: 1020 }], breaks: [] },
		FR: { hours: [{ start: 480, end: 1020 }], breaks: [] },
		SA: {},
		SU: {},
	}}
	workingHoursPermisions={{
		isValidUserToRenderDeleteAndAddSlot: true,
		isValidUserToRenderApplyToAll: true,
		allow24HourSlot: false,
		timePickerInterval: 15,
	}}
	customLables={{
		toggleOffTitle: 'Closed',
		toggleDisabledTitle: 'Not Available',
		errorMessage: 'Invalid time range',
		applyToAllButtonTitle: 'Apply to all days',
		addSlotButtonTitle: 'Add Slot',
		deleteButtonTitle: 'Delete Slot',
		dayLabels: {
			Monday: 'Monday',
			Tuesday: 'Tuesday',
			Wednesday: 'Wednesday',
			Thursday: 'Thursday',
			Friday: 'Friday',
			Saturday: 'Saturday',
			Sunday: 'Sunday',
		},
	}}
	gtmEventsCallBack={(eventDescription) => {}}
	onWeekDayConfigChange={(config) => {}}
	onValidationChange={(hasErrors, errors) => {}}
	onUpdateStatusChange={(hasUpdates) => {}}
/>

View in Playroom

Breaks Mode

Set componentBaseType="breaks" to configure break times. This mode allows you to set single or multiple break times for each day.

<WorkingHours
	componentBaseType="breaks"
	initialWeekDayConfig={{
		MO: { 
			hours: [{ start: 480, end: 1020 }], 
			breaks: [{ start: 720, end: 780 }] 
		},
		TU: { 
			hours: [{ start: 480, end: 1020 }], 
			breaks: [{ start: 720, end: 780 }] 
		},
		WE: { hours: [{ start: 480, end: 1020 }], breaks: [] },
		TH: { hours: [{ start: 480, end: 1020 }], breaks: [] },
		FR: { hours: [{ start: 480, end: 1020 }], breaks: [] },
		SA: {},
		SU: {},
	}}
	workingHoursPermisions={{
		isValidUserToRenderDeleteAndAddSlot: true,
		isValidUserToRenderApplyToAll: true,
		allow24HourSlot: false,
		timePickerInterval: 15,
	}}
	customLables={{
		toggleOffTitle: 'No breaks',
		toggleDisabledTitle: 'Day off',
		errorMessage: 'Invalid time range',
		deleteButtonTitle: 'Delete Break',
		addSlotButtonTitle: 'Add Break',
		applyToAllButtonTitle: 'Apply to All',
		dayLabels: {
			Monday: 'Monday',
			Tuesday: 'Tuesday',
			Wednesday: 'Wednesday',
			Thursday: 'Thursday',
			Friday: 'Friday',
			Saturday: 'Saturday',
			Sunday: 'Sunday',
		},
	}}
/>

View in Playroom

API Reference

WorkingHours

Prop	Default	Description
`children?`	_	`React.ReactNode` Optional React children to be rendered within the widget
`componentBaseType?`	`'workingHours'`	`'workingHours' \| 'breaks'` Determines the base configuration type for the widget. 'workingHours' for configuring working hours, 'breaks' for configuring break times
`initialWeekDayConfig?`	`{}`	`WeekDayConfig` Initial configuration for each day of the week including hours and breaks. Times are specified in minutes from midnight (e.g., 540 = 9:00 AM, 1020 = 5:00 PM)
`workingHoursPermisions?`	_	`WorkingHoursPermissions` Permission settings that control what actions users can perform (add/remove slots, apply to all, 24-hour slots, time intervals)
`workingHoursPermisions?.isValidUserToRenderDeleteAndAddSlot`	`false`	`boolean` Permission settings that control what actions users can perform (add/remove slots)
`workingHoursPermisions?.isValidUserToRenderApplyToAll`	`false`	`boolean` Permission settings that control what actions users can perform (apply to all)
`workingHoursPermisions?.allow24HourSlot`	`false`	`boolean` Permission settings that control what actions users can perform (24-hour slots)
`workingHoursPermisions?.timePickerInterval`	_	`15 \| 60 \| 30 \| 45 \| undefined` Permission settings that control what actions users can perform (time intervals)
`customLables?`	_	`CustomLablesType` Custom text labels for UI elements to support internationalization. Includes day labels, button titles, error messages
`customLables?.toggleOffTitle`	`"Closed"`	`string` Custom text label for the toggle off title
`customLables?.toggleDisabledTitle`	`"Closed"`	`string` Custom text label for the toggle disabled title
`customLables?.errorMessage`	`"slots overlapping"`	`string` Custom text label for the error message
`customLables?.deleteButtonTitle`	`"Delete"`	`string` Custom text label for the delete button title
`customLables?.addSlotButtonTitle`	`"Add Slot"`	`string` Custom text label for the add slot button title
`customLables?.applyToAllButtonTitle`	`"Apply to All"`	`string` Custom text label for the apply to all button title
`customLables?.dayLabels`	`{}`	`Record<string, string>` Custom text labels for the day labels
`onWeekDayConfigChange?`	_	`(config: WeekDayConfig) => void` Callback fired when the week day configuration changes. Use this to sync changes with parent state or API
`onValidationChange?`	_	`(hasErrors: boolean, errors: string[]) => void` Callback fired when validation state changes. Critical for form validation and user feedback
`onUpdateStatusChange?`	_	`(hasUpdates: boolean) => void` Callback fired when the update status changes. Indicates if user has made unsaved modifications
`gtmEventsSetUp?`	_	`GtmEventsSetUpTypes` Google Tag Manager events configuration for analytics tracking. Optional configuration for tracking user interactions
`gtmEventsSetUp?.sendGtmAnalytics`	_	`(event: string, shouldPushToGTM: boolean, shouldPushToAmp: boolean) => void` Google Tag Manager events configuration for analytics tracking. Optional configuration for tracking user interactions
`gtmEventsSetUp?.gtmEventsObject`	_	`GtmEventsObject` Google Tag Manager events configuration for analytics tracking. Optional configuration for tracking user interactions
`gtmEventsSetUp?.gtmEventsObject?.toggleOn`	_	`string` Google Tag Manager event for the toggle on action
`gtmEventsSetUp?.gtmEventsObject?.toggleOff`	_	`string` Google Tag Manager event for the toggle off action
`gtmEventsSetUp?.gtmEventsObject?.deleteSlot`	_	`string` Google Tag Manager event for the delete slot action
`gtmEventsSetUp?.gtmEventsObject?.addSlot`	_	`string` Google Tag Manager event for the add slot action
`gtmEventsSetUp?.gtmEventsObject?.applyToAll`	_	`string` Google Tag Manager event for the apply to all action

Style API

Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.

Please refer to the Style API documentation for more insights.

WorkingHours parts

<WorkingHours
	className="border-primary border-2"
	componentBaseType="workingHours"
	initialWeekDayConfig={{
		MO: { hours: [{ start: 480, end: 1020 }], breaks: [] },
		TU: { hours: [{ start: 480, end: 1020 }], breaks: [] },
		WE: { hours: [{ start: 480, end: 1020 }], breaks: [] },
		TH: { hours: [{ start: 480, end: 1020 }], breaks: [] },
		FR: { hours: [{ start: 480, end: 1020 }], breaks: [] },
		SA: {},
		SU: {},
	}}
	workingHoursPermisions={{
		isValidUserToRenderDeleteAndAddSlot: true,
		isValidUserToRenderApplyToAll: true,
		allow24HourSlot: false,
		timePickerInterval: 15,
	}}
	customLables={{
		toggleOffTitle: 'Closed',
		toggleDisabledTitle: 'Not Available',
		errorMessage: 'Invalid time range',
		applyToAllButtonTitle: 'Apply to all days',
		addSlotButtonTitle: 'Add Slot',
		deleteButtonTitle: 'Delete Slot',
		dayLabels: {
			Monday: 'Monday',
			Tuesday: 'Tuesday',
			Wednesday: 'Wednesday',
			Thursday: 'Thursday',
			Friday: 'Friday',
			Saturday: 'Saturday',
			Sunday: 'Sunday',
		},
	}}
	gtmEventsCallBack={(eventDescription) => {}}
	onWeekDayConfigChange={(config) => {}}
	onValidationChange={(hasErrors, errors) => {}}
	onUpdateStatusChange={(hasUpdates) => {}}
/>

View in Playroom

Stylable Parts	Description
root	The container that wraps the `WorkingHours` component

WorkingHours

Quick Start

Key Features​

Working Hours Mode​

Breaks Mode​

API Reference​

WorkingHours

Style API​

WorkingHours parts​

Key Features

Working Hours Mode

Breaks Mode

API Reference

Style API

WorkingHours parts