da55306a5a
* --init * progress... * add more docs * bunch of changes and added back platform * development guides added * more guides in develop with cal * self hosted WIP * deployments * fix deployment steps * self-hosted guides * .. * Removed the development only sections * Removed 'with Cal.com' * use steps component for steps --------- Co-authored-by: Keith Williams <keithwillcode@gmail.com>
231 lines
18 KiB
Plaintext
231 lines
18 KiB
Plaintext
---
|
|
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> |