luzpazandGitHub
8612f77c07
Found via `codespell -q 3 -S "*.svg,./apps/web/public/static/locales" -L afterall,datea,fo,ist,optionel`
91 lines
4.0 KiB
Plaintext
91 lines
4.0 KiB
Plaintext
---
|
||
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 (
|
||
<>
|
||
<Connect.AppleCalendar />
|
||
</>
|
||
);
|
||
}
|
||
```
|
||
|
||
For a demonstration of the Apple calendar connect integration, please refer to the video below.
|
||
|
||
<p></p>
|
||
|
||
<iframe
|
||
style={{ width: "100%", maxWidth: "560px" }}
|
||
height="315"
|
||
src="https://www.loom.com/embed/0db65d94754443ae91fed28f9bc10509?sid=8389e585-ab9c-457f-944f-82ec7e595f13"
|
||
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 (
|
||
<>
|
||
<Connect.AppleCalendar isMultiCalendar={true} />
|
||
</>
|
||
);
|
||
}
|
||
```
|
||
|
||
For a demonstration of the Apple calendar connect integration for multiple users, please refer to the video below.
|
||
|
||
<p></p>
|
||
|
||
<iframe
|
||
height="315"
|
||
style={{ width: "100%", maxWidth: "560px" }}
|
||
src="https://www.loom.com/embed/5844146fbcf840f99e35f9620a34186d"
|
||
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 | Specifies 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>
|