Booker - Cal.com Docs

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.

Name	Required	Description
username	Yes	Username of the person whose schedule is to be displayed
eventSlug	Yes	Unique slug created for a particular event
orgBannerUrl	No	URL of the user’s current organization
customClassNames	No	To pass in custom classnames from outside for styling the atom
month	No	The exact month for displaying a user’s availability; defaults to the current month
selectedDate	No	Default selected date for which the slot picker opens
startTime	No	Custom 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")`)
hideBranding	No	For hiding any branding on the booker
isAway	No	Sets the booker component to the away state
allowsDynamicBooking	No	Boolean indicating if the booking is a dynamic booking
bookingData	No	Data for rescheduling a booking passed in via this prop
defaultFormValues	No	Prefilled values for booking form fields like name, email, guests, notes, reschedule reason, etc.
isTeamEvent	No	Boolean indicating if it is a team event
duration	No	Refers to a multiple-duration event type; selects default if not passed
durationConfig	No	Configures selectable options for a multi-duration event type
hashedLink	No	Refers to the private link from event types page
isInstantMeeting	No	Boolean indicating if the booking is an instant meeting
rescheduleUid	No	Unique ID generated during rescheduling
bookingUid	No	Unique ID generated during booking
locationUrl	No	Custom meeting link URL instead of a Cal.com link
firstName	No	First name of the attendee
lastName	No	Last name of the attendee
guests	No	Invite a guest to join a meeting
name	No	Host name
onCreateBookingSuccess	No	Callback function for successful booking creation
onCreateBookingError	No	Callback function triggered on booking creation failure
onCreateRecurringBookingSuccess	No	Callback function for successful recurring booking creation
onCreateRecurringBookingError	No	Callback function triggered on recurring booking creation failure
onCreateInstantBookingSuccess	No	Callback function for successful instant booking creation
onCreateInstantBookingError	No	Callback function triggered on instant booking creation failure
onReserveSlotSuccess	No	Callback function for successful slot reservation
onReserveSlotError	No	Callback function triggered on slot reservation failure
onDeleteSlotSuccess	No	Callback function for successful slot deletion
onDeleteSlotError	No	Callback function triggered on slot deletion failure
view	No	Specifies the layout of the booker atom into column, week, or month view
metadata	No	Used to pass custom metadata values into the booker. Metadata should be an object eg: `{ bookingSource: "website", userRole: "admin" }`
bannerUrl	No	Adds custom banner to the booker atom
onBookerStateChange	No	Callback function that is triggered when the state of the booker atom changes.
allowUpdatingUrlParams	No	Boolean indicating if the URL parameters should be updated, defaults to false.
confirmButtonDisabled	No	Boolean indicating if the submit button should be disabled, defaults to false.
timeZones	No	Array of valid IANA timezones to be used in the booker. Eg. [“Asia/Kolkata”, “Europe/London”]
onTimeslotsLoaded	No	Callback function triggered once the available timeslots have been fetched.

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

Property	Description
bookerContainer	Adds styling to the whole of the booker atom

Event Meta Styles (`eventMetaCustomClassNames`)

Property	Description
eventMetaContainer	Styles the event meta component containing details about an event
eventMetaTitle	Adds styles to the event meta title
eventMetaTimezoneSelect	Adds styles to the event meta timezone selector

Date Picker Styles (`datePickerCustomClassNames`)

Property	Description
datePickerContainer	Adds styling to the date picker
datePickerTitle	Styles the date picker title
datePickerDays	Adds styling to all days in the date picker
datePickerDate	Adds styling to all dates in the date picker
datePickerDatesActive	Styles only the dates with available slots
datePickerToggle	Styles the left and right toggle buttons

Available Time Slots Styles (`availableTimeSlotsCustomClassNames`)

Property	Description
availableTimeSlotsContainer	Adds styling to the available time slots component
availableTimeSlotsHeaderContainer	Styles only the header container
availableTimeSlotsTitle	Adds styles to the title
availableTimeSlotsTimeFormatToggle	Adds styles to the format toggle buttons
availableTimes	Styles all the available times container

Confirmation Step Styles (`confirmStep`)

Property	Description
confirmButton	Styles the confirm button in the booking form
backButton	Styles 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"
          }
        }}
      />
    </>
  )
}

Getting Started

​Styling

​Root Level Styles

​Event Meta Styles (eventMetaCustomClassNames)

​Date Picker Styles (datePickerCustomClassNames)

​Available Time Slots Styles (availableTimeSlotsCustomClassNames)