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

import { Connect } from "@calcom/atoms";

export default function Connect() {
  return (
    <main>
      <Connect.GoogleCalendar />
    </main>
  )
}

For a demonstration of the Google calendar connect integration, please refer to the video below.

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

import { Connect } from "@calcom/atoms";

export default function Connect() {
  return (
    <main>
      <Connect.GoogleCalendar isMultiCalendar={true} />
    </main>
  )
}

For a demonstration of the Google calendar connect integration for multiple users, please refer to the video below.

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.

NameRequiredDescription
classNameNoTo pass in custom classnames from outside for styling the atom
labelNoThe label for the connect button
alreadyConnectedLabelNoLabel to display when atom is in already connected state
loadingLabelNoLabel to display when atom is in loading state
onCheckErrorNoA callback function to handle errors when checking the connection status
redirNoA custom redirect URL link where the user gets redirected after successful authentication
initialDataNoInitial data to be passed
isMultiCalendarNoSpecfies if the button supports integration for multiple users
tooltipNoIn case user wants to pass external tooltip component
tooltipSideNoSpecifies what direction the tooltip appears
isClickableNoBoolean to disable button or not
onSuccessNoA callback function to handle success when checking the connection status

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.

Was this page helpful?

IntroductionOutlook calendar connect