WorkingHours API
API reference docs for theWorkingHourswidget. For examples and details on the usage of this widget, visit the widget demo page.
Props
| Props | Type | Description | Default |
|---|---|---|---|
children? | React.ReactNode | Optional React children to be rendered within the widget | _ |
componentBaseType? | 'workingHours' | 'breaks' | Determines the base configuration type for the widget. 'workingHours' for configuring working hours, 'breaks' for configuring break times | 'workingHours' |
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 | boolean | Permission settings that control what actions users can perform (add/remove slots) | false |
workingHoursPermisions?. isValidUserToRenderApplyToAll | boolean | Permission settings that control what actions users can perform (apply to all) | false |
workingHoursPermisions?. allow24HourSlot | boolean | Permission settings that control what actions users can perform (24-hour slots) | false |
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 | string | Custom text label for the toggle off title | "Closed" |
customLables?. toggleDisabledTitle | string | Custom text label for the toggle disabled title | "Closed" |
customLables?.errorMessage | string | Custom text label for the error message | "slots overlapping" |
customLables?.deleteButtonTitle | string | Custom text label for the delete button title | "Delete" |
customLables?. addSlotButtonTitle | string | Custom text label for the add slot button title | "Add Slot" |
customLables?. applyToAllButtonTitle | string | Custom text label for the apply to all button title | "Apply to All" |
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 | _ |