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.

You need to set up a provider before you can use the CalendarSync component.

Using the CalendarSync component

PreviewCode

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.