Apple calendar connect

The Apple calendar connect button is used to effortlessly syncs a user’s apple 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 Apple calendar connect button

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

export default function ConnectCalendar() {
  return (
    <main>
      <Connect.AppleCalendar />
    </main>
  );
}

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

The apple calendar atom works a bit differently than outlook and google calendar. We don’t get redirected to an OAuth consent page, instead a modal appears which prompts us to create an app specific password to use with Cal.com

Similar to Outlook and Google calendar, the Apple 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.

Below code snippet can be used to render the Apple calendar connect button for multiple users

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

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

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

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.