Cal Provider

This is now deprecated and under maintenance for existing users only - no new customers can sign up for the platform plan

Cal Provider is used to setup scheduling within your app. It is used in the root of your app, be it _app.js or or _app.tsx in case of Next.js or App.js or App.ts in case of React. Here is an example:

import "@calcom/atoms/globals.min.css";
import { CalProvider } from '@calcom/atoms';

function MyApp({ Component, pageProps }) {
  const accessToken = "managed-user-access-token";

  return (
    <CalProvider
      clientId={process.env.CAL_OAUTH_CLIENT_ID ?? ""}
      options={{
        apiUrl: process.env.CAL_API_URL ?? "https://api.cal.com/v2",
        refreshUrl: process.env.REFRESH_URL
      }}
      accessToken={accessToken}
    >
      <Component {...pageProps} />
    </CalProvider>
  );
}

export default MyApp;

Below is a list of props that can be passed to the Cal Provider.

Name	Required	Description
clientId	Yes	Your OAuth client ID
options	Yes	Configuration options - apiUrl (should be https://api.cal.com/v2) and refreshUrl (URL of endpoint you have to build that to which atoms will send expired access tokens and receive new one in return. Read how to set it up here) and readingDirection (defaults to “ltr” but can also pass “rtl” which will change direction of UI components)
accessToken	No	The access token of your managed user for whom cal handles scheduling.
autoUpdateTimezone	No	Whether to automatically update managed user timezone (default: true)
language	No	Language code (default: “en”) - available languages: “en”, “de”, “fr”, “it”, “nl”, “pt-BR”, “es”
organizationId	No	ID of your organization

---

Previous: Quickstart

Getting started with atoms

Next: Cal OAuth Provider

OAuth provider setup