> ## Documentation Index
> Fetch the complete documentation index at: https://cal.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Google calendar connect

The Google calendar connect button is used to sync user's google calendar - whenever an event is created in cal.com it will show up in the google calendar.

Below code snippet can be used to render the Google calendar connect button

```js theme={null}
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 />

<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" />

<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 theme={null}
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 />

<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" />

<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 />

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