---
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.
Please ensure all custom classnames are valid [Tailwind CSS](https://tailwindcss.com/) classnames.
### 1. Google calendar connect atom
| 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
| 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
| 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
| 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
| 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 |
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.
### 6. Calendar settings atom
| Name | Required | Description |
|:------------|:----------|:-----------------------------------------------------------------------------------------------------------|
| classNames | No | To pass in custom classnames from outside for styling the atom |
### 7. Destination calendar settings atom
| 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
| 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
| Name | Description |
|:------------|:-----------------------------------------------------|
| className | Pass in custom classnames from outside for styling the button |
### 2. Outlook calendar connect atom
| Name | Description |
|:------------|:-----------------------------------------------------|
| className | Pass in custom classnames from outside for styling the button |
### 3. Apple calendar connect atom
| Name | Description |
|:------------|:-----------------------------------------------------|
| className | Pass in custom classnames from outside for styling the button |
### 4. Availability settings atom
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
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
| 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
| Name | Description |
|:------------|:-----------------------------------------------------|
| classNames | Pass in custom classnames from outside for styling the atom |
### 8. Selected calendar settings atom
| Name | Description |
|:------------|:-----------------------------------------------------|
| classNames | Pass in custom classnames from outside for styling the atom |
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.