Skip to main content
The Create Schedule atom provides a simple dialog interface for users to create new availability schedules. Fully customizable with callback support for handling successful schedule creation. Below code snippet can be used to render the Create schedule atom 
import { CreateSchedule } from "@calcom/atoms";

export default function CreateSchedule() {
  return (
    <>
      <CreateSchedule
        name="Create new schedule"
        customClassNames={{
          createScheduleButton: "bg-red-500 border-none my-4 mx-2 rounded-md",
        }}
      />
    </>
  )
}
For a demonstration of the Create schedule atom, please refer to the video below.

For developers who don’t want the dialog-based interface, we provide a CreateScheduleForm atom to integrate the schedule creation form directly into your own UI. This headless approach gives you full flexibility to handle layout, styling, and user flow exactly how you need it. Below code snippet can be used to render the Create schedule form atom 
import { CreateScheduleForm } from "@calcom/atoms";

export default function CreateScheduleForm() {
  return (
    <>
      <CreateScheduleForm
        customClassNames={{
          atomsWrapper: "border-black border-[1px] w-[500px] my-10 mx-5 rounded-md px-5 py-5",
          buttons: {
            continue: "bg-red-400 border-none",
            container: "justify-start",
          },
        }}
      />
    </>
  )
}
For a demonstration of the Create schedule form, please refer to the video below.

We offer all kinds of customizations to the Create schedule atom via props. Below is a list of props that can be passed to the atom.

NameRequiredDescription
nameNoThe label for the create schedule button
customClassNamesNoTo pass in custom classnames from outside for styling the atom
onSuccessNoCallback function that handles successful creation of schedule
onErrorNoCallback function to handles errors at the time of schedule creation
disableToastsNoBoolean value that determines whether the toasts are displayed or not
Along with the props, create schedule atom accepts custom styles via the customClassNames prop. Below is a list of props that fall under this customClassNames prop.

NameDescription
createScheduleButtonAdds styling to the create button
inputFieldAdds styling to the container of the name input field
formWrapperAdds styling to the whole form
actionsButtonsObject containing classnames for the submit, cancel buttons and container inside the create schedule atom
Similar to the create schedule atom, the create schedule form also offer all kinds of customizations via props. Below is a list of props that can be passed to the atom.

| customClassNames | No | To pass in custom classnames from outside for styling the atom | | onSuccess | No | Callback function that handles successful creation of schedule | | onError | No | Callback function to handles errors at the time of schedule creation | | disableToasts | No | Boolean value that determines whether the toasts are displayed or not | Along with the props, create schedule form also accepts custom styles via the customClassNames prop. Below is a list of props that fall under this customClassNames prop.
NameDescription
formWrapperAdds styling to the whole form
inputFieldAdds styling to the container of the name input field
actionsButtonsObject containing classnames for the submit, cancel buttons and container inside the create schedule atom
Please ensure all custom classnames are valid Tailwind CSS classnames. Note that sometimes the custom classnames may fail to override the styling with the classnames that you might have passed via props. That is because the clsx utility function that we use to override classnames inside our components has some limitations. A simple get around to solve this issue is to just prefix your classnames with ! property just before passing in any classname.
⌘I