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

[https://www.loom.com/embed/dcfcaf8c25754b8daec8fe309fbf7c7c?sid=3181cba5-2e16-4f6e-99de-4408a5109c37](https://www.loom.com/embed/dcfcaf8c25754b8daec8fe309fbf7c7c?sid=3181cba5-2e16-4f6e-99de-4408a5109c37)

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.

[https://www.loom.com/embed/7a34123b3bd94fbc80809392aab5f712?sid=12bacd7e-62b2-40aa-9fd6-30d69ab22e0a](https://www.loom.com/embed/7a34123b3bd94fbc80809392aab5f712?sid=12bacd7e-62b2-40aa-9fd6-30d69ab22e0a)

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.

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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.