Booker

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.

​

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

​

Event Meta Styles (eventMetaCustomClassNames)

​

Date Picker Styles (datePickerCustomClassNames)

​

Available Time Slots Styles (availableTimeSlotsCustomClassNames)

​

Confirmation Step Styles (confirmStep)

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