Props
Below is a list of tables that contains all the available props each atom contains.
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 | The label for the already connected button |
| onCheckError | No | A callback function to handle errors when checking the connection status |
2. 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 |
| 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 |
3. 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 bookig is a dynamic booking |
| bookingData | No | When rescheduling a booking, the current bookings data is passed in via this prop |
| 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 | Yes | A unique id that is generated at the time of rescheduling a booking |
| bookingUid | Yes | A unique id that is generated at the time of creating a booking |
| 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 |
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. 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 |
3. 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 |
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.