<html>
element:
Name | Required | Description |
---|---|---|
id | No | The ID of the schedule which fetches a user’s availability |
labels | No | Helpful if you want to pass in custom labels for i18n |
customClassNames | No | To pass in custom classnames from outside for styling the atom |
onUpdateSuccess | No | A callback function to handle updating user availability successfully |
onBeforeUpdate | No | Validates schedule before it is sent to the server; if true, the schedule is sent, else it is not |
onUpdateError | No | A callback function that gets triggered when the user availability fails to update |
onDeleteSuccess | No | A callback function that gets triggered when the user availability is deleted successfully |
onDeleteError | No | A callback function that gets triggered when the user availability fails to delete |
onFormStateChange | No | A callback function that gets triggered whenever the form state changes, providing real-time access to form data |
enableOverrides | No | Allows user to enable or disable date overrides display in the atom; defaults to disabled |
disableEditableHeading | No | Prevents users from editing the heading |
allowDelete | No | When set to false, this prop hides the delete button |
allowSetToDefault | No | When set to false, this prop hides the set to default toggle |
disableToasts | No | Allows users to enable or disable toast notifications, with the default setting being disabled. |
Name | Description |
---|---|
containerClassName | Adds styling to the whole availability settings component |
ctaClassName | Adds stylings only to certain call-to-action buttons |
editableHeadingClassName | Editable heading or title can be styled |
formClassName | Form which contains the days and toggles |
timezoneSelectClassName | Adds styling to the timezone select component |
subtitlesClassName | Styles the subtitle |
scheduleClassNames | An object for granular styling of schedule components (see detailed table below) |
dateOverrideClassNames | An object for granular styling of date override components (see detailed table below) |
scheduleClassNames
prop accepts an object with the following structure for granular styling of schedule components:
Property Path | Description |
---|---|
schedule | Styles the entire schedule component |
scheduleContainer | Styles the schedule container |
scheduleDay | Adds styling to just the day of a particular schedule |
dayRanges | Adds styling to day ranges |
timeRangeField | Styles the time range input fields |
labelAndSwitchContainer | Adds styling to label and switches |
timePicker | An object for granular styling of time picker dropdown components (see nested table below) |
timePicker
prop accepts an object with the following structure for granular styling of time picker dropdown components. This applies to the time selection dropdowns (e.g., [ 9:00 ]) that users can click to open a dropdown with available times or click to manually enter a time:
Property Path | Description |
---|---|
container | Styles the main time picker container |
valueContainer | Styles the container that holds the selected value |
value | Styles the displayed selected time value |
input | Styles the input field for manual time entry |
dropdown | Styles the dropdown menu with time options |
dateOverrideClassNames
prop accepts an object with the following structure for granular styling of date override components:
Property Path | Description |
---|---|
container | Styles the main container |
title | Styles the title |
description | Styles the description |
button | Styles the button to add date override |
Method | Description |
---|---|
validateForm | Validates the current availability form state and returns a promise with validation results. |
handleFormSubmit | Programmatically submits the availability form, triggering the same validation and submission flow as clicking the save button. Unlike validateForm , this method will check required fields and prevent submission unless all required fields are set |
handleFormSubmit
method accepts an optional callbacks object with the following properties:
validateForm
method returns an AvailabilityFormValidationResult
object with:
isValid
: Boolean indicating if the form passed validationerrors
: Object containing any validation errors foundvalidateForm
method will not return any error. The validation focuses on the format and consistency of provided data rather than enforcing required field completion.