Availability settings

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.

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");
          }}
       />
    <>
  )
}

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");
          }}
       />
    <>
  )
}

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.

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.