# CalendarSync component

Source: https://developer.nylas.com/docs/v3/components/notetaker-components/calendarsync-component/

The `CalendarSync` component lets users enable or disable automatic Notetaker scheduling for their calendar events. Typically, you would use it on settings or integration pages where users manage how Notetaker joins meetings.

> **Info:** 
> **You need to [**set up a provider**](/docs/v3/components/#set-up-provider) before you can use the `CalendarSync` component**.

## Using the `CalendarSync` component

```jsx

import React, { useEffect } from "react";
import { CalendarSync, provider as useProvider } from "@nylas/react";
// import '@nylas/react/style.css' // to style the component

function App() {
  const provider = useProvider();
  useEffect(() => {
    // Necessary to set before using the component
    provider.setAccessToken("nylas-access-token");
    provider.setApiUrl("eu"); // can be "us" or "eu", defaults to "us"
  }, []);

  return (
    <CalendarSync
      calendarId="example-calendar-id"
      grantId="example-grant-id"
      notetakerName="Example Notetaker"
      onUpdate={(calendar) => console.log("Updated calendar:", calendar)}
      onCancel={() => console.log("Edit cancelled")}
      onError={(err) => console.error("Error:", err)}
      hideRecordingSettings={false}
      hideNameInput={false}
    />
  );
}

export default App;


```

## `CalendarSync` properties

| Property     | Type                         | Description                                        |
| ------------ | ---------------------------- | -------------------------------------------------- |
| `calendarId` | `string`                     | The ID of the calendar to sync with.               |
| `onSync?`    | `(event: SyncEvent) => void` | A callback generated when the sync status changes. |
| `autoSync?`  | `boolean`                    | Automatically sync on mount.                       |
| `className?` | `string`                     | Additional CSS classes for the container.          |

### `SyncEvent`

| Property    | Type                                    | Description                                |
| ----------- | --------------------------------------- | ------------------------------------------ |
| `status`    | `'syncing'` \| `'success'` \| `'error'` | The current sync status.                   |
| `error?`    | `string`                                | The error message generated if sync fails. |
| `timestamp` | `string`                                | When the sync event occurred.              |