diff --git a/docs/mint.json b/docs/mint.json index b2e297dee9..4627dbe2ff 100644 --- a/docs/mint.json +++ b/docs/mint.json @@ -191,6 +191,7 @@ "group": "Atoms", "icon": "atom", "pages": [ + "platform/atoms/cal-provider", "platform/atoms/google-calendar-connect", "platform/atoms/outlook-calendar-connect", "platform/atoms/apple-calendar-connect", diff --git a/docs/platform/atoms/cal-provider.mdx b/docs/platform/atoms/cal-provider.mdx new file mode 100644 index 0000000000..387c1e9036 --- /dev/null +++ b/docs/platform/atoms/cal-provider.mdx @@ -0,0 +1,42 @@ +--- +title: "Cal Provider" +--- + +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: + + +```js +import "@calcom/atoms/globals.min.css"; +import { CalProvider } from '@calcom/atoms'; + +function MyApp({ Component, pageProps }) { + const accessToken = "managed-user-access-token"; + + return ( + + + + ); +} + +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](https://cal.com/docs/platform/quickstart#4-backend%3A-setting-up-a-refresh-token-endpoint)) 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") | +| organizationId | No | ID of your organization | \ No newline at end of file