vynte-infra/calendar
2
0
Fork 0
Code Issues Pull Requests Actions 854 Packages Projects Releases Wiki Activity

chore: revamp platform docs (#17117)

Browse Source 
* all atoms have standalone page

* restructure tabs for platfom pages

* remove unused page

* add missing icons

* cleanup intro page for platform

* update loom links

---------

Co-authored-by: Keith Williams <keithwillcode@gmail.com>
This commit is contained in:
Rajiv Sahal
2024-10-15 15:21:09 +00:00
committed by GitHub
co-authored by Keith Williams
parent 1f42a152b0
commit c21f0caecf
12 changed files with 659 additions and 512 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/mint.json
+12 -1
View File
@@ -182,9 +182,20 @@
"group": "Getting Started",
"pages": [
"platform/introduction",
{
"group": "Atoms",
"icon": "atom",
"pages": [
"platform/atoms/google-calendar-connect",
"platform/atoms/outlook-calendar-connect",
"platform/atoms/apple-calendar-connect",
"platform/atoms/availability-settings",
"platform/atoms/booker",
"platform/atoms/calendar-settings"
]
},
"platform/quickstart",
"platform/booking-redirects",
"platform/atoms-reference",
"platform/faq"
]
},
docs/platform/atoms-reference.mdx
-231
View File
@@ -1,231 +0,0 @@
---
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>
docs/platform/atoms/apple-calendar-connect.mdx
+90
View File
@@ -0,0 +1,90 @@
---
title: "Apple calendar connect"
---
The Apple calendar connect button is used to effortlessly syncs a user's apple calendar. This allows users to create, view and edit events, with options available for type and time all from the platform.
Below code snippet can be used to render the Apple calendar connect button
```js
import { Connect } from "@calcom/atoms";
export default function ConnectCalendar() {
return (
<main>
<Connect.AppleCalendar />
</main>
);
}
```
For a demonstration of the Apple calendar connect integration, please refer to the video below.
<p></p>
<iframe
width="560"
height="315"
src="https://www.loom.com/embed/0db65d94754443ae91fed28f9bc10509?sid=d7b823cc-cda1-4d18-881a-aa49242b873d"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen="true"
></iframe>
<p></p>
The apple calendar atom works a bit differently than outlook and google calendar. We don’t get redirected to an OAuth consent page, instead a modal appears which prompts us to create an app specific password to use with Cal.com
Similar to Outlook and Google calendar, the Apple calendar connect supports integration for both single and multiple users. The above video demonstration showcases the integration for a single user. To enable integration for multiple users, simply pass the prop `isMultiCalendar` as `true`.
Below code snippet can be used to render the Apple calendar connect button for multiple users
```js
import { Connect } from "@calcom/atoms";
export default function ConnectCalendar() {
return (
<main>
<Connect.AppleCalendar isMultiCalendar={true} />
</main>
);
}
```
For a demonstration of the Apple calendar connect integration for multiple users, please refer to the video below.
<p></p>
<iframe
width="560"
height="315"
src="https://www.loom.com/embed/5844146fbcf840f99e35f9620a34186d?sid=a13f4ebf-f565-4488-8352-4e68080ef237"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen="true"
></iframe>
<p></p>
We offer all kinds of customizations to the Outlook calendar connect via props. Below is a list of props that can be passed to the Google calendar connect.
<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 |
| initialData | No | Initial data to be passed |
| isMultiCalendar | No | Specfies if the button supports integration for multiple users |
| tooltip | No | In case user wants to pass external tooltip component |
| tooltipSide | No | Specifies what direction the tooltip appears |
| isClickable | No | Boolean to disable button or not |
| onSuccess | No | A callback function to handle success when checking the connection status|
<Note>
If you try to put your Apple Id password in the password field, it will throw an error. It only accepts an
app specific password generated from https://appleid.apple.com/account/manage.
</Note>
docs/platform/atoms/availability-settings.mdx
+116
View File
@@ -0,0 +1,116 @@
---
title: "Availability settings"
---
The availability settings atom enables a user to set their available time slots. This atom allows users to define specific time slots when they are available for meetings or events, helping them manage their schedules effectively and avoid double bookings.
Below code snippet can be used to render the availability settings atom
```js
import { AvailabilitySettings } from "@calcom/atoms";
export default function Availability() {
return (
<>
<AvailabilitySettings
onUpdateSuccess={() => {
console.log("Updated schedule successfully");
}}
onDeleteSuccess={() => {
console.log("Deleted schedule successfully");
}}
/>
<>
)
}
```
For a demonstration of the availability settings atom, please refer to the video below.
<p></p>
<iframe
width="560"
height="315"
src="https://www.loom.com/embed/6fd65789f5744227b4ea6d0189d4fc67?sid=544a6afd-2836-4704-aa56-e801cbd93cbc"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen="true"
></iframe>
<p></p>
If a user wishes to add further adjustments to their availability for special occasions or events, they can use the date overrides feature. Date overrides enables users to pick any date that they're currently available and set specific hours for availability on that day or mark themselves entirely unavailable. Once that day is passed, the date override is automatically deleted.
Below code snippet can be used to render date overrides into the availability settings atom
```js
import { AvailabilitySettings } from "@calcom/atoms";
export default function Availability() {
return (
<>
<AvailabilitySettings
enableOverrides={true}
onUpdateSuccess={() => {
console.log("Updated schedule successfully");
}}
onDeleteSuccess={() => {
console.log("Deleted schedule successfully");
}}
/>
<>
)
}
```
For a demonstration of the availability settings atom with date overrides, please refer to the video below.
<p></p>
<iframe
width="560"
height="315"
src="https://www.loom.com/embed/aa9ba47cbc284496ac51c26e172c7b12?sid=6d2b5bb3-d2eb-4a95-adb5-c67d863d4e34"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen="true"
></iframe>
<p></p>
We offer all kinds of customizations to the availability settings atom via props and customClassNames.
Below is a list of props that can be passed to the 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 |
Along with the props, Availability settings atom accepts custom styles via the **customClassNames** prop. Below is a list of props that fall under this **customClassNames** prop.
<p></p>
| 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 |
<Info>Please ensure all custom classnames are valid [Tailwind CSS](https://tailwindcss.com/) classnames.</Info>
docs/platform/atoms/booker.mdx
+140
View File
@@ -0,0 +1,140 @@
---
title: "Booker"
---
The booker atom is a dynamic component that facilitates the booking process for users. It allows individuals to easily select available time slots and confirm their participation in various events, streamlining the scheduling experience. It is one of the most important atoms and a critical piece of our scheduling system.
Below code snippet can be used to render the booker atom
```js
import { Booker } from "@calcom/atoms";
export default function Booker( props : BookerProps ) {
return (
<>
<Booker
eventSlug={props.eventTypeSlug}
username={props.calUsername}
onCreateBookingSuccess={() => {
console.log("booking created successfully");
}}
/>
<>
)
}
```
For a demonstration of the booker atom, please refer to the video below.
<p></p>
<iframe
width="560"
height="315"
src="https://www.loom.com/embed/73dbb943cef0409c9bc57d5050453a6e?sid=45575c09-4786-486e-99f9-6cf7f4e8db50"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen="true"
></iframe>
<p></p>
It is also possible to change the booker layout into a week or column view, you just need to pass in the view prop the layout you want to use. The layouts are as follows: **MONTH_VIEW,** **WEEK_VIEW** and **COLUMN_VIEW**. Both the week and column layouts come with an Overlay Calendar feature, which allows users to overlay multiple calendars on top of their primary calendar.
Below code snippet can be used to render the booker atom with week view
```js
import { Booker } from "@calcom/atoms";
export default function Booker( props : BookerProps ) {
return (
<>
<Booker
view="WEEK_VIEW"
eventSlug={props.eventTypeSlug}
username={props.calUsername}
onCreateBookingSuccess={() => {
console.log("booking created successfully");
}}
/>
<>
)
}
```
For a demonstration of the booker atom along with calendar overlay, please refer to the video below.
<p></p>
<iframe
width="560"
height="315"
src="https://www.loom.com/embed/554e9ef9f7874cbe9d179b63cc2c601b?sid=fc185a1c-1fb9-4705-a222-8ccd131bd5b6"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen="true"
></iframe>
<p></p>
We offer all kinds of customizations to the booker atom via props and customClassNames.
Below is a list of props that can be passed to the 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
Along with the props, booker atom accepts custom styles via the **customClassNames** prop. Below is a list of props that fall under this **customClassNames** prop.
<p></p>
| 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 |
docs/platform/atoms/calendar-settings.mdx
+107
View File
@@ -0,0 +1,107 @@
---
title: "Calendar settings"
---
The calendar settings atom can be used to configure how your event types interact with your calendars. This atom gives you the ability to select where to add events when you're booked. Additionally, you can also select which calendars you want to check for conflicts to prevent double bookings.
Below code snippet can be used to render the calendar settings button
```js
import { CalendarSettings } from "@calcom/atoms";
export default function CalendarSettingsComponent() {
return (
<>
<CalendarSettings />
<>
)
}
```
For a demonstration of the calendar settings atom, please refer to the video below.
<p></p>
<iframe
width="560"
height="315"
src="https://www.loom.com/embed/7f6969363b8743abafcec3974f281987?sid=493e7b5d-b3ae-4821-94a3-972260630e6c"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen="true"
></iframe>
<p></p>
Customizations can be done to the calendar settings atom via props and classnames. Below is a list of props that can be passed to the calendar settings atom
<p></p>
| Name | Required | Description |
|:------------|:----------|:-----------------------------------------------------------------------------------------------------------|
| classNames | No | To pass in custom classnames from outside for styling the atom
Along with the props, calendar settings atom accepts custom styles via the **classNames** prop. Below is a list of props that fall under this **classNames** prop.
<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 |
<p></p>
Additionally, if you wish to select either the Destination Calendar or the Selected Calendar, we also provide atoms specifically designed for this purpose.
**1. Destination calendar settings atom**
The destination calendar settings atom lets you can select which calendar you want to add events to when you're booked. Below code snippet can be used to render the destination calendar settings atom.
```js
import { DestinationCalendarSettings } from "@calcom/atoms";
export default function DestinationCalendars() {
const loadingStatus = <>Loading...</>
return (
<>
<DestinationCalendarSettings classNames="mx-5" statusLoader={loadingStatus} />
<>
)
}
```
This is how the destination calendar settings atom looks:
<img src="/images/destination_calendar_settings.png" />
Customizations can be done to the destination calendar settings atom via props. Below is a list of props that can be passed to the 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 |
**2. Selected calendar settings atom**
The selected calendar settings atom lets you select which calendars you want to check for conflicts to prevent double bookings. Below code snippet can be used to render the selected calendar settings atom.
```js
import { SelectedCalendarSettings } from "@calcom/atoms";
export default function SelectedCalendars( props : SelectedCalendarsProps ) {
return (
<>
<SelectedCalendarSettings classNames="mx-5 mb-6" />
<>
)
}
```
This is how the selected calendar settings atom looks:
<img src="/images/selected_calendar_settings.png" />
Customizations can be done to the destination calendar settings atom via props. Below is a list of props that can be passed to the calendar settings atom
<p></p>
| Name | Required | Description |
|:------------|:----------|:-----------------------------------------------------------------------------------------------------------|
| classNames | No | To pass in custom classnames from outside for styling the atom |
docs/platform/atoms/google-calendar-connect.mdx
+92
View File
@@ -0,0 +1,92 @@
---
title: "Google calendar connect"
---
The Google calendar connect button is used to effortlessly syncs a user's google calendar. This allows users to create, view and edit events, with options available for type and time all from the platform.
Below code snippet can be used to render the Google calendar connect button
```js
import { Connect } from "@calcom/atoms";
export default function Connect() {
return (
<main>
<Connect.GoogleCalendar />
</main>
)
}
```
For a demonstration of the Google calendar connect integration, please refer to the video below.
<p></p>
<iframe
width="560"
height="315"
src="https://www.loom.com/embed/dcfcaf8c25754b8daec8fe309fbf7c7c?sid=3181cba5-2e16-4f6e-99de-4408a5109c37"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen="true"
></iframe>
<p></p>
Google calendar connect supports integration for both single and multiple users. The above video demonstration showcases the integration for a single user. To enable integration for multiple users, simply pass the prop `isMultiCalendar` as `true`. This allows your application to handle multiple Google calendar accounts seamlessly, providing a more flexible experience for users who manage several calendars.
Below code snippet can be used to render the Google calendar connect button for multiple users
```js
import { Connect } from "@calcom/atoms";
export default function Connect() {
return (
<main>
<Connect.GoogleCalendar isMultiCalendar={true} />
</main>
)
}
```
For a demonstration of the Google calendar connect integration for multiple users, please refer to the video below.
<p></p>
<iframe
width="560"
height="315"
src="https://www.loom.com/embed/7a34123b3bd94fbc80809392aab5f712?sid=12bacd7e-62b2-40aa-9fd6-30d69ab22e0a"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen="true"
></iframe>
<p></p>
We offer all kinds of customizations to the Google calendar connect via props. Below is a list of props that can be passed to the Google calendar connect.
<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 |
| initialData | No | Initial data to be passed |
| isMultiCalendar | No | Specfies if the button supports integration for multiple users |
| tooltip | No | In case user wants to pass external tooltip component |
| tooltipSide | No | Specifies what direction the tooltip appears |
| isClickable | No | Boolean to disable button or not |
| onSuccess | No | A callback function to handle success when checking the connection status |
<Note>
Please ensure all custom classnames are valid Tailwind CSS classnames. 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>
docs/platform/atoms/outlook-calendar-connect.mdx
+83
View File
@@ -0,0 +1,83 @@
---
title: "Outlook calendar connect"
---
The Outlook calendar connect button is used to effortlessly syncs a user's outlook calendar. This allows users to create, view and edit events, with options available for type and time all from the platform.
Below code snippet can be used to render the Google calendar connect button
```js
import { Connect } from "@calcom/atoms";
export default function ConnectCalendar() {
return (
<main>
<Connect.OutlookCalendar />
</main>
)
}
```
For a demonstration of the Google calendar connect integration, please refer to the video below.
<p></p>
<iframe
width="560"
height="315"
src="https://www.loom.com/embed/2da4cdfe8d314f74a55e98121dcdb7bd?sid=cdc73356-13c0-49ba-90a3-91d885251457"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen="true"
></iframe>
<p></p>
Outlook calendar connect supports integration for both single and multiple users. The above video demonstration showcases the integration for a single user. To enable integration for multiple users, simply pass the prop `isMultiCalendar` as `true`. This allows your application to handle multiple Outlook calendar accounts seamlessly, providing a more flexible experience for users who manage several calendars.
Below code snippet can be used to render the Outlook calendar connect button for multiple users
```js
import { Connect } from "@calcom/atoms";
export default function ConnectCalendar() {
return (
<main>
<Connect.OutlookCalendar isMultiCalendar={true} />
</main>
)
}
```
For a demonstration of the Outlook calendar connect integration for multiple users, please refer to the video below.
<p></p>
<iframe
width="560"
height="315"
src="https://www.loom.com/embed/b90c21c2bc9c478f9c28c1ee62bb8568?sid=fe1af433-e6e6-4149-9fe2-d3cdbc7d6ca1"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen="true"
></iframe>
<p></p>
We offer all kinds of customizations to the Outlook calendar connect via props. Below is a list of props that can be passed to the Google calendar connect.
<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 |
| initialData | No | Initial data to be passed |
| isMultiCalendar | No | Specfies if the button supports integration for multiple users |
| tooltip | No | In case user wants to pass external tooltip component |
| tooltipSide | No | Specifies what direction the tooltip appears |
| isClickable | No | Boolean to disable button or not |
| onSuccess | No | A callback function to handle success when checking the connection status |
docs/platform/booking-redirects.mdx
+1
View File
@@ -1,6 +1,7 @@
---
title: Booking redirects
description: Find out how to manage the booking flow.
"icon": "clipboard"
---
When creating an OAuth client you can specify:
docs/platform/faq.mdx
+1
View File
@@ -1,6 +1,7 @@
---
title: FAQ
description: Answers to the most common questions about the Platform API and atoms.
"icon": "comments"
---
### 1. What is an OAuth client?
- A platform OAuth client enables you communicate with our API and manage your users.
docs/platform/introduction.mdx
+16 -280
View File
@@ -1,287 +1,23 @@
---
title: Welcome to Platform!
description: The one stop destination to build your next scheduling business.
title: Introduction
icon: "presentation-screen"
---
<img src="/images/Platform_banner.png" width="800" height="800" />
Platform is the best choice for starting a scheduling business. You can white-label the design or change every line of code to make it work for you. It consists of our newly created set of APIs and plug and play UI components called atoms.
<a
href="https://app.cal.com/signup?redirect=https://app.cal.com/settings/platform/new"
heading="">
Get started
<a href="https://app.cal.com/signup?redirect=https://app.cal.com/settings/platform/new" heading="">
Get started
</a>
## Atoms
Atoms are customizable UI components handling scheduling on behalf of your users. Everything from the frontend to the backend is being handled by the atom, all you need to is import the atom and drop it in your code and you're good to go.
## How to use atoms
Here's some examples around how you can use atoms in your project.
### 1. Google Calendar connect atom
The below code snippet renders the Google calendar connect button which syncs a user's google calendar.
```js
import { Connect } from "@calcom/atoms";
export default function Connect() {
return (
<main>
<Connect.GoogleCalendar />
</main>
)
}
```
If you need to customize the appearance of any atom, you can pass in custom css styles via a className prop.
```js
import { Connect } from "@calcom/atoms";
export default function Connect() {
return (
<main>
<Connect.GoogleCalendar className="h-[40px] bg-gradient-to-r from-[#8A2387] via-[#E94057] to-[#F27121] text-center text-base font-semibold text-transparent text-white hover:bg-orange-700" />
</main>
)
}
```
This is how the google calendar connect button looks:
<img src="/images/gcal_atom.png" />
### 2. Outlook Calendar connect atom
The below code snippet renders the Outlook calendar connect button which syncs a user's outlook calendar.
```js
import { Connect } from "@calcom/atoms";
export default function ConnectCalendar() {
return (
<main>
<Connect.OutlookCalendar />
</main>
)
}
```
If you need to customize the appearance of the atom, you can pass in custom css styles via the className prop. Additionally, if you want to pass in a custom redirect url that can be done via the redir prop.
```js
import { Connect } from "@calcom/atoms";
export default function ConnectCalendar() {
return (
<main>
<Connect.OutlookCalendar className="h-[40px] bg-gradient-to-r from-[#8A2387] via-[#E94057] to-[#F27121] text-center text-base font-semibold text-transparent text-white hover:bg-orange-700" redir="http://localhost:4321/calendars" />
</main>
)
}
```
This is how the outlook calendar connect button looks:
<img src="/images/outlook_calendar.png" />
### 3. Apple Calendar connect atom
The below code snippet renders the Apple calendar connect button which syncs a user's apple calendar.
```js
import { Connect } from "@calcom/atoms";
export default function ConnectCalendar() {
return (
<main>
<Connect.AppleCalendar />
</main>
)
}
```
If you need to customize the appearance of the atom, you can pass in custom css styles via the className prop.
```js
import { Connect } from "@calcom/atoms";
export default function ConnectCalendar() {
return (
<main>
<Connect.AppleCalendar className="h-[40px] bg-gradient-to-r from-[#E94057] to-[#F27121] text-center text-base font-semibold text-transparent text-white hover:bg-orange-700" />
</main>
)
}
```
This is how the apple calendar connect button looks:
<img src="/images/apple_calendar_atom.png" />
The apple calendar atom works a bit differently than outlook and google calendar. We don't get redirected to an OAuth consent page, instead a modal appears which prompts us to create an app specific password to use with Cal.com:
<img src="/images/apple_calendar_modal.png" />
<Note>If you try to put your Apple Id password in the above password field, it will throw an error. It only accepts an app specific password generated from https://appleid.apple.com/account/manage.</Note>
### 4. Availability settings atom
The below code snippet renders the availability settings atom through which a user can set their available time slots.
```js
import { AvailabilitySettings } from "@calcom/atoms";
export default function Availability() {
return (
<>
<AvailabilitySettings
onUpdateSuccess={() => {
console.log("Updated schedule successfully");
}}
onDeleteSuccess={() => {
console.log("Deleted schedule successfully");
}}
/>
<>
)
}
```
This is how the availability settings atom looks:
<img src="/images/availability_settings.png" />
If a user wishes to add further adjustments to their availability for special occasions or events, they can use the date overrides feature. Date overrides enables users to pick any date that they're currently available and set specific hours for availability on that day or mark themselves entirely unavailable. Once that day is passed, the date override is automatically deleted.
The below code snippet renders date overrides into the availability settings atom
```js
import { AvailabilitySettings } from "@calcom/atoms";
export default function Availability() {
return (
<>
<AvailabilitySettings
enableOverrides={true}
onUpdateSuccess={() => {
console.log("Updated schedule successfully");
}}
onDeleteSuccess={() => {
console.log("Deleted schedule successfully");
}}
/>
<>
)
}
```
This is how the availability settings atom looks with date overrides:
<img src="/images/date_overrides.png" />
When a user tries to add date overrides for their availability, a modal appears which prompts the user to select the date and availability they want to override.
<img src="/images/date_overrides_modal.png" />
After successfully adding a date override, this is how the availability settings atom looks:
<img src="/images/date_overrides_added.png" />
### 5. Booker atom
The below code snippet renders the booker atom through which a user can be booked for any event that they have set.
```js
import { Booker } from "@calcom/atoms";
export default function Booker( props : BookerProps ) {
return (
<>
<Booker
eventSlug={props.eventTypeSlug}
username={props.calUsername}
onCreateBookingSuccess={() => {
console.log("booking created successfully");
}}
/>
<>
)
}
```
This is how the booker atom looks:
<img src="/images/booker.png" />
### 6. Calendar settings atom
The below code snippet renders the calendar settings atom through which you can configure how your event types interact with your calendars. The atom gives you the ability to select where to add events when you're booked. Additionally, you can also select which calendars you want to check for conflicts to prevent double bookings.
```js
import { CalendarSettings } from "@calcom/atoms";
export default function CalendarSettingsComponent( props : CalendarSettingsComponentProps ) {
return (
<>
<CalendarSettings />
<>
)
}
```
This is how the calendar settings atom looks:
<img src="/images/calendar_settings_atom.png" />
Additionally, if you wish to select either the Destination Calendar or the Selected Calendar, we also provide atoms specifically designed for this purpose.
**1. Destination calendar settings atom**
The below code snippet renders the destination calendar settings atom. Through this atom you can select which calendar you want to add events to when you're booked.
```js
import { DestinationCalendarSettings } from "@calcom/atoms";
export default function DestinationCalendars( props : DestinationCalendarsProps ) {
return (
<>
<DestinationCalendarSettings classNames="mx-5" statusLoader={<>Loading...</>} />
<>
)
}
```
This is how the destination calendar settings atom looks:
<img src="/images/destination_calendar_settings.png" />
**2. Selected calendar settings atom**
The below code snippet renders the selected calendar settings atom. Through this atom you can select which calendars you want to check for conflicts to prevent double bookings.
```js
import { SelectedCalendarSettings } from "@calcom/atoms";
export default function SelectedCalendars( props : SelectedCalendarsProps ) {
return (
<>
<SelectedCalendarSettings classNames="mx-5 mb-6" />
<>
)
}
```
This is how the selected calendar settings atom looks:
<img src="/images/selected_calendar_settings.png" />
## Platform APIs
We've also created a set of new and scalable APIs for our Platform customers called v2 which we plan to make the successor for our v1 APIs. Internally all the atoms use the new Platform APIs to handle scheduling.
Once you set up an OAuth client and create a managed user for that particular OAuth client you're ready to use the Platform API. Below are some examples around how you can use the Platform APIs in your project.
Go [here](/api-reference/v2) to see all the available endpoints.
<CardGroup cols={2}>
<Card href="/platform/atoms" title="Atoms" icon="rocket">
Customizable UI components handling scheduling on behalf of your users
</Card>
<Card href="/api-reference/v2" title="API" icon="code">
Learn how to use Cal.com's API to CRUD various Cal resources programmatically
</Card>
</CardGroup>
## Welcome to the Platform Documentation!
Platform is the best choice for starting a scheduling business. You can white-label the design or change every line of code to make it work for you. It consists of our newly created set of APIs and plug and play UI components called atoms.
docs/platform/quickstart.mdx
+1
View File
@@ -1,6 +1,7 @@
---
title: Quickstart
description: Find out how to use Cal "atoms" to integrate scheduling into your product.
"icon": "rocket"
---
## 1. Unlocking access to atoms