Availability settings - Cal.com Docs

The availability settings atom enables a user to set their available time slots. This atom allows users to define specific time slots when they are available for meetings or events, helping them manage their schedules effectively and avoid double bookings.

First, for the AvailabilitySettings toggle animation to work set the reading direction on the <html> element:

<html dir="ltr"> ... </html>

Below code snippet can be used to render the availability settings atom

import { AvailabilitySettings } from "@calcom/atoms";

export default function Availability() {
  return (
    <>
       <AvailabilitySettings
          onUpdateSuccess={() => {
            console.log("Updated schedule successfully");
          }}
          onDeleteSuccess={() => {
            console.log("Deleted schedule successfully");
          }}
          onFormStateChange={(formState) => {
            console.log("Form state updated");
            // Access form data: formState.name, formState.schedule, formState.timeZone, etc.
          }}
       />
    </>
  )
}

For a demonstration of the availability settings atom, please refer to the video below.

If a user wishes to add further adjustments to their availability for special occasions or events, they can use the date overrides feature. Date overrides enables users to pick any date that they’re currently available and set specific hours for availability on that day or mark themselves entirely unavailable. Once that day is passed, the date override is automatically deleted.

Below code snippet can be used to render date overrides into the availability settings atom

import { AvailabilitySettings } from "@calcom/atoms";

export default function Availability() {
  return (
    <>
       <AvailabilitySettings
          enableOverrides={true}
          onUpdateSuccess={() => {
            console.log("Updated schedule successfully");
          }}
          onDeleteSuccess={() => {
            console.log("Deleted schedule successfully");
          }}
          onFormStateChange={(formState) => {
            console.log("Form state changed:", formState);
            // Access form data including dateOverrides: formState.dateOverrides
          }}
       />
    </>
  )
}

For a demonstration of the availability settings atom with date overrides, please refer to the video below.

We offer all kinds of customizations to the availability settings atom via props and customClassNames.

Below is a list of props that can be passed to the availability settings atom.

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.

Along with the props, Availability settings atom accepts custom styles via the customClassNames prop. Below is a list of props that fall under this customClassNames prop.

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
scheduleContainer	Styles the entire schedule component
scheduleDay	Adds styling to just the day of a particular schedule
dayRanges	Adds styling to day ranges
timeRanges	Time ranges in the availability settings can be customized
labelAndSwitchContainer	Adds styling to label and switches
overridesModalClassNames	Adds styling to the date overrides modal

Please ensure all custom classnames are valid Tailwind CSS classnames.

Getting Started