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 classnames.
1. Google calendar connect atom
| Paramater | 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
| Paramater | 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 to after successful authentication |
3. Apple calendar connect atom
| Paramater | 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
| Paramater | Required | Description |
| id | No | The id of the schedule which fetches a user's availability |
| labels | No | Helpful if you wanna pass in your own lables 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 | Allows validating schedule before it is sent to the server. If it returns true the updated schedule is sent to the server, else it is not sent. |
| 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 is not deleted successfully |
| enableOverrides | No | Allows user to enable or disable showing date overrides in the atom. By default date overrides are disabled. |
5. Booker atom
| Paramater | 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 a users current organization |
| customClassNames | No | To pass in custom classnames from outside for styling the atom |
| month | No | The exact month that we wanna display a users availability for. If no value is passed it defaults to the current month |
| selectedDate | No | Default selected date for which the slotpicker will always open |
| hideBranding | No | For hiding any branding on the booker |
| isAway | No | Sets the booker component to the away state |
| allowsDynamicBooking | No | Boolean to indicate if the booking is a dynamic booking |
| bookingData | No | When rescheduling a booking, the current bookings data is passed in via this prop |
| defaultFormValues | No | If you want to prefill values for the booking form or booking fields, than can be done via this prop. The values include name, email, firstName, lastName, guests, notes, rescheduleReason, etc. |
| isTeamEvent | No | Boolean to indicate if it is a team event. If this boolean is passed, we will only check team events with this slug and event slug |
| duration | No | Refers to a multiple-duration event-type. If not passed, we select the default value |
| durationConfig | No | Configures the selectable options for a multi-duration event type |
| hashedLink | No | Refers to the private link from event types page |
| isInstantMeeting | No | Boolean to indicate if the booking is an instant meeting or not |
| rescheduleUid | No | A unique id that is generated at the time of rescheduling a booking |
| bookingUid | No | A unique id that is generated at the time of creating a booking |
| locationUrl | No | If you want to pass in a custom meeting link URL instead of a calcom 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 | A callback function to handle successful creation of a booking |
| onCreateBookingError | No | A callback function that gets triggered when the booking creation process fails |
| onCreateRecurringBookingSuccess | No | A callback function to handle successful creation of a recurring booking |
| onCreateRecurringBookingError | No | A callback function that gets triggered when the process of creating a recurring booking fails |
| onCreateInstantBookingSuccess | No | A callback function to handle successful creation of an instant booking |
| onCreateInstantBookingError | No | A callback function that gets triggered when the process of creating an instant booking fails |
| onReserveSlotSuccess | No | A callback function to handle successful reservation of a slot |
| onReserveSlotError | No | A callback function that gets triggered when the process of reserving a slot fails |
| onDeleteSlotSuccess | No | A callback function to handle successful deletion of a slot |
| onDeleteSlotError | No | A callback function that gets triggered when the process of deleting a slot fails |
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
| Paramater | Required | Description |
| classNames | No | To pass in custom classnames from outside for styling the atom |
7. Destination calendar settings atom
| Paramater | 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
| Paramater | 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
| Classname | Description |
| className | Pass in custom classnames from outside for styling the button |
2. Outlook calendar connect atom
| Classname | Description |
| className | Pass in custom classnames from outside for styling the button |
3. Apple calendar connect atom
| Classname | 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.
| Classname | 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 whole of the 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.
| Classname | Description |
| bookerContainer | Adds styling to the whole of 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 date in the date picker |
| datePickerDatesActive | Styles only the dates where a user has an available slot |
| datePickerToggle | Styles the left and right toggle buttons |
| availableTimeSlotsContainer | Adds styling to 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
| Classname | 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
| Classname | Description |
| classNames | Pass in custom classnames from outside for styling the atom |
8. Selected calendar settings atom
| Classname | 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.