luzpazandGitHub
8612f77c07
Found via `codespell -q 3 -S "*.svg,./apps/web/public/static/locales" -L afterall,datea,fo,ist,optionel`
83 lines
4.2 KiB
Plaintext
83 lines
4.2 KiB
Plaintext
---
|
|
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 (
|
|
<>
|
|
<Connect.OutlookCalendar />
|
|
</>
|
|
)
|
|
}
|
|
```
|
|
|
|
For a demonstration of the Google calendar connect integration, please refer to the video below.
|
|
|
|
<p></p>
|
|
|
|
<iframe
|
|
height="315"
|
|
style={{ width: "100%", maxWidth: "560px" }}
|
|
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 (
|
|
<>
|
|
<Connect.OutlookCalendar isMultiCalendar={true} />
|
|
</>
|
|
)
|
|
}
|
|
```
|
|
|
|
For a demonstration of the Outlook 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/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 | 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 | |