luzpazandGitHub
8612f77c07
Found via `codespell -q 3 -S "*.svg,./apps/web/public/static/locales" -L afterall,datea,fo,ist,optionel`
93 lines
4.5 KiB
Plaintext
93 lines
4.5 KiB
Plaintext
---
|
|
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 (
|
|
<>
|
|
<Connect.GoogleCalendar />
|
|
</>
|
|
)
|
|
}
|
|
```
|
|
|
|
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/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 (
|
|
<>
|
|
<Connect.GoogleCalendar isMultiCalendar={true} />
|
|
</>
|
|
)
|
|
}
|
|
```
|
|
|
|
For a demonstration of the Google 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/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 | 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>
|
|
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>
|