Atoms reference

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

1. Google calendar connect atom

ParamaterRequiredDescription
classNameNoTo pass in custom classnames from outside for styling the atom
labelNoThe label for the connect button
alreadyConnectedLabelNoThe label for the already connected button
onCheckErrorNoA callback function to handle errors when checking the connection status

2. Outlook calendar connect atom

ParamaterRequiredDescription
classNameNoTo pass in custom classnames from outside for styling the atom
labelNoThe label for the connect button
alreadyConnectedLabelNoThe label for the already connected button
onCheckErrorNoA callback function to handle errors when checking the connection status
redirNoA custom redirect url link where the user gets redirected to after successful authentication

3. Availability settings atom

ParamaterRequiredDescription
idNoThe id of the schedule which fetches a user's availability
labelsNoHelpful if you wanna pass in your own lables for i18n
customClassNamesNoTo pass in custom classnames from outside for styling the atom
onUpdateSuccessNoA callback function to handle updating user availability successfully
onUpdateErrorNoA callback function that gets triggered when the user availability fails to update
onDeleteSuccessNoA callback function that gets triggered when the user availability is deleted successfully
onDeleteErrorNoA callback function that gets triggered when the user availability is not deleted successfully

4. Booker atom

ParamaterRequiredDescription
usernameYesUsername of the person whose schedule is to be displayed
eventSlugYesUnique slug created for a particular event
orgBannerUrlNoURL of a users current organization
customClassNamesNoTo pass in custom classnames from outside for styling the atom
monthNoThe exact month that we wanna display a users availability for. If no value is passed it defaults to the current month
selectedDateNoDefault selected date for which the slotpicker will always open
hideBrandingNoFor hiding any branding on the booker
isAwayNoSets the booker component to the away state
allowsDynamicBookingNoBoolean to indicate if the bookig is a dynamic booking
bookingDataNoWhen rescheduling a booking, the current bookings data is passed in via this prop
isTeamEventNoBoolean 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
durationNoRefers to a multiple-duration event-type. If not passed, we select the default value
durationConfigNoConfigures the selectable options for a multi-duration event type
hashedLinkNoRefers to the private link from event types page
isInstantMeetingNoBoolean to indicate if the booking is an instant meeting or not
rescheduleUidYesA unique id that is generated at the time of rescheduling a booking
bookingUidYesA unique id that is generated at the time of creating a booking
firstNameNoFirst name of the attendee
lastNameNoLast name of the attendee
guestsNoInvite a guest to join a meeting
nameNoHost name
onCreateBookingSuccessNoA callback function to handle successful creation of a booking
onCreateBookingErrorNoA callback function that gets triggered when the booking creation process fails
onCreateRecurringBookingSuccessNoA callback function to handle successful creation of a recurring booking
onCreateRecurringBookingErrorNoA callback function that gets triggered when the process of creating a recurring booking fails
onCreateInstantBookingSuccessNoA callback function to handle successful creation of an instant booking
onCreateInstantBookingErrorNoA callback function that gets triggered when the process of creating an instant booking fails
onReserveSlotSuccessNoA callback function to handle successful reservation of a slot
onReserveSlotErrorNoA callback function that gets triggered when the process of reserving a slot fails
onDeleteSlotSuccessNoA callback function to handle successful deletion of a slot
onDeleteSlotErrorNoA 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

ClassnameDescription
classNamePass in custom classnames from outside for styling the button

2. Outlook calendar connect atom

ClassnameDescription
classNamePass in custom classnames from outside for styling the button

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

ClassnameDescription
containerClassNameAdds styling to the whole availability settings component
ctaClassNameAdds stylings only to certain call to action buttons
editableHeadingClassNameEditable heading or title can be styled
formClassNameForm which contains the days and toggles
timezoneSelectClassNameAdds styling to the timezone select component
subtitlesClassNameStyles the subtitle
scheduleContainerStyles the whole of the schedule component
scheduleDayAdds styling to just the day of a particular schedule
dayRangesAdds styling to day ranges
timeRangesTime ranges in the availability settings can be customized
labelAndSwitchContainerAdds styling to label and switches

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

ClassnameDescription
bookerContainerAdds styling to the whole of booker atom
eventMetaContainerStyles the event meta component containing details about an event
eventMetaTitleAdds styles to the event meta title
eventMetaTimezoneSelectAdds styles to the event meta timezone selector
datePickerContainerAdds styling to the date picker
datePickerTitleStyles the date picker title
datePickerDaysAdds styling to all days in the date picker
datePickerDateAdds styling to all date in the date picker
datePickerDatesActiveStyles only the dates where a user has an available slot
datePickerToggleStyles the left and right toggle buttons
availableTimeSlotsContainerAdds styling to available time slots component
availableTimeSlotsHeaderContainerStyles only the header container
availableTimeSlotsTitleAdds styles to the title
availableTimeSlotsTimeFormatToggleAdds styles to the format toggle buttons
availableTimesStyles 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.

Was this page helpful?