---
title: Atoms reference
description: Everything related to atoms from props to styling.
---

## Props 

Below is a list of tables that contains all the available props each atom contains.

<Info>Please ensure all custom classnames are valid [Tailwind CSS](https://tailwindcss.com/) classnames.</Info>

### 1. Google calendar connect atom
<p></p>

| Name               | Required | Description                                                                                               |
|:--------------------|:----------|:-----------------------------------------------------------------------------------------------------------|
| className          | No       | To pass in custom classnames from outside for styling the atom                                            |
| label              | No       | The label for the connect button                                                                          |
| alreadyConnectedLabel | No    | Label to display when atom is in already connected state                                                  |
| loadingLabel       | No       | Label to display when atom is in loading state                                                            |
| onCheckError       | No       | A callback function to handle errors when checking the connection status                                  |


### 2. Outlook calendar connect atom
<p></p>

| Name               | Required | Description                                                                                               |
|:--------------------|:----------|:-----------------------------------------------------------------------------------------------------------|
| className          | No       | To pass in custom classnames from outside for styling the atom                                            |
| label              | No       | The label for the connect button                                                                          |
| alreadyConnectedLabel | No    | Label to display when atom is in already connected state                                                  |
| loadingLabel       | No       | Label to display when atom is in loading state                                                            |
| onCheckError       | No       | A callback function to handle errors when checking the connection status                                  |
| redir              | No       | A custom redirect URL link where the user gets redirected after successful authentication                 |


### 3. Apple calendar connect atom
<p></p>

| Name               | Required | Description                                                                                               |
|:--------------------|:----------|:-----------------------------------------------------------------------------------------------------------|
| className          | No       | To pass in custom classnames from outside for styling the atom                                            |
| label              | No       | The label for the connect button                                                                          |
| alreadyConnectedLabel | No    | Label to display when atom is in already connected state                                                  |
| loadingLabel       | No       | Label to display when atom is in loading state                                                            |
| onCheckError       | No       | A callback function to handle errors when checking the connection status                                  |


### 4. Availability settings atom
<p></p>

| Name               | Required | Description                                                                                               |
|:--------------------|:----------|:-----------------------------------------------------------------------------------------------------------|
| id                 | No       | The ID of the schedule which fetches a user's availability                                                |
| labels             | No       | Helpful if you want to pass in custom labels for i18n                                                     |
| customClassNames   | No       | To pass in custom classnames from outside for styling the atom                                            |
| onUpdateSuccess    | No       | A callback function to handle updating user availability successfully                                     |
| onBeforeUpdate     | No       | Validates schedule before it is sent to the server; if true, the schedule is sent, else it is not         |
| onUpdateError      | No       | A callback function that gets triggered when the user availability fails to update                        |
| onDeleteSuccess    | No       | A callback function that gets triggered when the user availability is deleted successfully                |
| onDeleteError      | No       | A callback function that gets triggered when the user availability fails to delete                        |
| enableOverrides    | No       | Allows user to enable or disable date overrides display in the atom; defaults to disabled                 |


### 5. Booker atom
<p></p>

| 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                                                 |
| 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                                                  |


<Info>Booker embed atom shares the same prop interface as the Booker atom. Hence, you can pass in the same props to both the Booker Embed atom and the Booker atom.</Info>

### 6. Calendar settings atom
<p></p>

| Name       | Required | Description                                                                                               |
|:------------|:----------|:-----------------------------------------------------------------------------------------------------------|
| classNames | No       | To pass in custom classnames from outside for styling the atom                                            |


### 7. Destination calendar settings atom
<p></p>

| Name         | Required | Description                                                                                               |
|:--------------|:----------|:-----------------------------------------------------------------------------------------------------------|
| statusLoader | No       | To pass in a custom component for the loading state                                                       |
| classNames   | No       | To pass in custom classnames from outside for styling the atom                                            |


### 8. Selected calendar settings atom
<p></p>

| Name       | Required | Description                                                                                               |
|:------------|:----------|:-----------------------------------------------------------------------------------------------------------|
| classNames | No       | To pass in custom classnames from outside for styling the atom                                            |


## Styling

Below is a list of tables that contains all the available classnames that can be used for each atom.

### 1. Google calendar connect atom
<p></p>

| Name       | Description                                         |
|:------------|:-----------------------------------------------------|
| className  | Pass in custom classnames from outside for styling the button |


### 2. Outlook calendar connect atom
<p></p>

| Name       | Description                                         |
|:------------|:-----------------------------------------------------|
| className  | Pass in custom classnames from outside for styling the button |


### 3. Apple calendar connect atom
<p></p>

| Name       | Description                                         |
|:------------|:-----------------------------------------------------|
| className  | Pass in custom classnames from outside for styling the button |


### 4. Availability settings atom
<p></p>

Availability settings atom accepts custom styles via the **customClassNames** prop. All the props that we see below fall under this **customClassNames** prop.

| Name                      | Description                                                           |
|:---------------------------|:-----------------------------------------------------------------------|
| containerClassName        | Adds styling to the whole availability settings component             |
| ctaClassName              | Adds stylings only to certain call-to-action buttons                  |
| editableHeadingClassName  | Editable heading or title can be styled                               |
| formClassName             | Form which contains the days and toggles                              |
| timezoneSelectClassName   | Adds styling to the timezone select component                         |
| subtitlesClassName        | Styles the subtitle                                                   |
| scheduleContainer         | Styles the entire schedule component                                  |
| scheduleDay               | Adds styling to just the day of a particular schedule                 |
| dayRanges                 | Adds styling to day ranges                                            |
| timeRanges                | Time ranges in the availability settings can be customized            |
| labelAndSwitchContainer   | Adds styling to label and switches                                    |
| overridesModalClassNames  | Adds styling to the date overrides modal                              |


### 5. Booker atom
<p></p>

Booker atom accepts custom styles via the **customClassNames** prop. All the props that we see below fall under this **customClassNames** prop. In terms of styling there are four major classnames for the Booker, i.e. **bookerContainer**, **eventMetaCustomClassNames**, **datePickerCustomClassNames** and **availableTimeSlotsCustomClassNames**. Most of the classnames below fall under one of these sub classes.

| Name                        | Description                                                          |
|:-----------------------------|:----------------------------------------------------------------------|
| bookerContainer             | Adds styling to the whole of the booker atom                         |
| 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                      |
| 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                             |
| 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                             |


### 6. Calendar settings atom
<p></p>

| Name                                    | Description                                                  |
|:-----------------------------------------|:--------------------------------------------------------------|
| calendarSettingsCustomClassnames        | Adds styling to the entire calendar settings atom            |
| destinationCalendarSettingsCustomClassnames | Adds styling only to the destination calendar container   |
| selectedCalendarSettingsCustomClassnames | Adds styling only to the selected calendar container       |


### 7. Destination calendar settings atom
<p></p>

| Name       | Description                                         |
|:------------|:-----------------------------------------------------|
| classNames | Pass in custom classnames from outside for styling the atom |


### 8. Selected calendar settings atom
<p></p>

| Name       | Description                                         |
|:------------|:-----------------------------------------------------|
| classNames | Pass in custom classnames from outside for styling the atom |


<Note>Please 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.</Note>