Skip to main content
The booker atom is a dynamic component that facilitates the booking process for users. It allows individuals to easily select available time slots and confirm their participation in various events, streamlining the scheduling experience. It is one of the most important atoms and a critical piece of our scheduling system. Below code snippet can be used to render the booker atom 
import { Booker } from "@calcom/atoms";

export default function Booker( props : BookerProps ) {
  return (
    <>
      <Booker
        eventSlug={props.eventTypeSlug}
        username={props.calUsername}
        onCreateBookingSuccess={() => {
          console.log("booking created successfully");
         }}
      />
    </>
  )
}
For a demonstration of the booker atom, please refer to the video below.

It is also possible to change the booker layout into a week or column view, you just need to pass in the view prop the layout you want to use. The layouts are as follows: MONTH_VIEW, WEEK_VIEW and COLUMN_VIEW. Both the week and column layouts come with an Overlay Calendar feature, which allows users to overlay multiple calendars on top of their primary calendar. Below code snippet can be used to render the booker atom with week view 
import { Booker } from "@calcom/atoms";

export default function Booker( props : BookerProps ) {
  return (
    <>
      <Booker
        view="WEEK_VIEW"
        eventSlug={props.eventTypeSlug}
        username={props.calUsername}
        onCreateBookingSuccess={() => {
          console.log("booking created successfully");
         }}
      />
    </>
  )
}
For a demonstration of the booker atom along with calendar overlay, please refer to the video below.

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

NameRequiredDescription
usernameYesUsername of the person whose schedule is to be displayed
eventSlugYesUnique slug created for a particular event
orgBannerUrlNoURL of the user’s current organization
customClassNamesNoTo pass in custom classnames from outside for styling the atom
monthNoThe exact month for displaying a user’s availability; defaults to the current month
selectedDateNoDefault selected date for which the slot picker opens
startTimeNoCustom start time for the Booker that allows users to decide the first available date. Accepts JavaScript Date object or date string in format YYYY-MM-DD (e.g., "2025-08-20" or new Date("2025-08-20"))
hideBrandingNoFor hiding any branding on the booker
isAwayNoSets the booker component to the away state
allowsDynamicBookingNoBoolean indicating if the booking is a dynamic booking
bookingDataNoData for rescheduling a booking passed in via this prop
defaultFormValuesNoPrefilled values for booking form fields like name, email, guests, notes, reschedule reason, etc.
isTeamEventNoBoolean indicating if it is a team event
durationNoRefers to a multiple-duration event type; selects default if not passed
durationConfigNoConfigures selectable options for a multi-duration event type
hashedLinkNoRefers to the private link from event types page
isInstantMeetingNoBoolean indicating if the booking is an instant meeting
bookingUidNoUnique ID generated during booking creation
rescheduleUidNoUnique ID generated during booking creation, same as bookingUid
locationUrlNoCustom meeting link URL instead of a Cal.com link
firstNameNoFirst name of the attendee
lastNameNoLast name of the attendee
guestsNoInvite a guest to join a meeting
nameNoHost name
onCreateBookingSuccessNoCallback function for successful booking creation
onCreateBookingErrorNoCallback function triggered on booking creation failure
onCreateRecurringBookingSuccessNoCallback function for successful recurring booking creation
onCreateRecurringBookingErrorNoCallback function triggered on recurring booking creation failure
onCreateInstantBookingSuccessNoCallback function for successful instant booking creation
onCreateInstantBookingErrorNoCallback function triggered on instant booking creation failure
onReserveSlotSuccessNoCallback function for successful slot reservation
onReserveSlotErrorNoCallback function triggered on slot reservation failure
onDeleteSlotSuccessNoCallback function for successful slot deletion
onDeleteSlotErrorNoCallback function triggered on slot deletion failure
viewNoSpecifies the layout of the booker atom into column, week, or month view
metadataNoUsed to pass custom metadata values into the booker. Metadata should be an object eg: { bookingSource: "website", userRole: "admin" }
bannerUrlNoAdds custom banner to the booker atom
onBookerStateChangeNoCallback function that is triggered when the state of the booker atom changes.
allowUpdatingUrlParamsNoBoolean indicating if the URL parameters should be updated, defaults to false.
confirmButtonDisabledNoBoolean indicating if the submit button should be disabled, defaults to false.
timeZonesNoArray of valid IANA timezones to be used in the booker. Eg. [“Asia/Kolkata”, “Europe/London”]
onTimeslotsLoadedNoCallback function triggered once the available timeslots have been fetched.
roundRobinHideOrgAndTeamNoBoolean indicating if the organization and team should be hidden in the booker atom sidebar for round robin scheduling type, defaults to false.
showNoAvailabilityDialogNoBoolean indicating if the no availability dialog should be shown, defaults to true.
silentlyHandleCalendarFailuresNoBoolean when true the booker still displays slots when the third party calendars credentials are invalid or expired, Booker may show stale availability when enabled
hideEventMetadataNoBoolean that controls the visibility of the event metadata sidebar. When true, hides the left sidebar containing event details like title, description, duration, and host information. Defaults to false.

​
Styling

Booker atom accepts custom styles via the customClassNames prop. This prop is an object that contains root level styles and nested objects for styling different parts of the booker component. Each nested object groups related styles for a specific section of the booker (e.g., eventMeta, datePicker, availableTimeSlots, etc). Here is an example booker with root level style bookerContainer and nested object datePickerCustomClassNames with datePickerDatesActive style: 
import { Booker } from "@calcom/atoms";

export default function Booker( props : BookerProps ) {
  return (
    <>
      <Booker
        ...
        customClassNames={{
          bookerContainer: "!bg-[#F5F2FE] [&_button:!rounded-full] border-subtle border",
          datePickerCustomClassNames: {
            datePickerDatesActive: "!bg-[#D7CEF5]",
          },
        }}
      />
    </>
  )
}
Below is a list of customClassNames properties grouped by their parent objects:

​
Root Level Styles

PropertyDescription
bookerContainerAdds styling to the whole of the booker atom

​
Event Meta Styles (eventMetaCustomClassNames)

PropertyDescription
eventMetaContainerStyles the event meta component containing details about an event
eventMetaTitleAdds styles to the event meta title
eventMetaTimezoneSelectAdds styles to the event meta timezone selector

​
Date Picker Styles (datePickerCustomClassNames)

PropertyDescription
datePickerContainerAdds styling to the date picker
datePickerTitleStyles the date picker title
datePickerDaysAdds styling to all days in the date picker
datePickerDateAdds styling to all dates in the date picker
datePickerDatesActiveStyles only the dates with available slots
datePickerToggleStyles the left and right toggle buttons

​
Available Time Slots Styles (availableTimeSlotsCustomClassNames)

PropertyDescription
availableTimeSlotsContainerAdds styling to the available time slots component
availableTimeSlotsHeaderContainerStyles only the header container
availableTimeSlotsTitleAdds styles to the title
availableTimeSlotsTimeFormatToggleAdds styles to the format toggle buttons
availableTimesStyles all the available times container

​
Confirmation Step Styles (confirmStep)

PropertyDescription
confirmButtonStyles the confirm button in the booking form
backButtonStyles the back button in the booking form
Here is an example with more custom styles: 
import { Booker } from "@calcom/atoms";

export default function Booker( props : BookerProps ) {
  return (
    <>
      <Booker
        ...
        customClassNames={{
          bookerContainer: "!bg-[#F5F2FE] [&_button:!rounded-full] border-subtle border",
          datePickerCustomClassNames: {
            datePickerDatesActive: "!bg-[#D7CEF5]",
          },
          eventMetaCustomClassNames: {
            eventMetaTitle: "text-[#7151DC]",
          },
          availableTimeSlotsCustomClassNames: {
            availableTimeSlotsHeaderContainer: "!bg-[#F5F2FE]",
            availableTimes: "!bg-[#D7CEF5]",
          },
          confirmStep: {
            confirmButton: "!bg-purple-700",
            backButton: "text-purple-700 hover:!bg-purple-700 hover:!text-white"
          }
        }}
      />
    </>
  )
}

​
Rescheduling a booking

The booker atom also supports rescheduling a booking. To reschedule a booking, you need to pass in the rescheduleUid prop to the booker atom along with the other necessary props. This will allow the booker to display the reschedule form and handle the rescheduling process. The rescheduleUid is the booking uid you get when you create a booking. Here is an example of how to use the booker atom for rescheduling an individual event: 
import { Booker } from "@calcom/atoms";

export default function Booker( props : BookerProps ) {
  return (
    <>
      <Booker
        eventSlug={props.eventTypeSlug}
        username={props.calUsername}
        // rescheduleUid is the booking uid you get when you create a booking
        // it is only required when rescheduling a booking
        rescheduleUid={props.rescheduleUid}
        onCreateBookingSuccess={() => {
          console.log("Booking rescheduled successfully!");
         }}
      />
    </>
  )
}
For team events, you need to pass isTeamEvent and teamId prop to the booker along with the other necessary props. This will allow the booker to display the reschedule form and handle the rescheduling process. The teamId is the team id you get when you create a team event. Here is an example of how to use the booker atom for rescheduling a team event: 
import { Booker } from "@calcom/atoms";

export default function Booker( props : BookerProps ) {
  return (
    <>
      <Booker
        eventSlug={props.eventTypeSlug}
        // rescheduleUid is the booking uid you get when you create a booking
        // it is only required when rescheduling a booking
        rescheduleUid={props.rescheduleUid}
        isTeamEvent={true}
        teamId={props.teamId}
        onCreateBookingSuccess={() => {
          console.log("Booking rescheduled successfully!");
         }}
      />
    </>
  )
}