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

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.

calendarSyncStore

This interface describes a Zustand store, an advanced state management React solution. This is intended for advanced use only – the Notetaker components will work without using this store directly.

The interface for the CalendarSync component state store. calendarSyncStore manages all form data and UI state information for the component.

import { calendarSyncStore, CalendarSync } from "@nylas/react"

export default function App() {
  const store = calendarSyncStore();
    useEffect(() => {
      store.setName("ExampleName")
    }, [])

  return (
    <div>
      <CalendarSync />
    </div>
  )
}

calendarSyncStore properties

advancedSettings

Description	Display the Advanced Settings section.
Type	boolean
Default	false

calendar

Description	The synced calendar.
Type	null | Calendar

getCalendar

Description	Fetches calendar data from the Nylas Calendar API.
Type	(calendarId: string, grantId: string, fallbackNotetakerName?: string) => Promise<void>

handleCancel

Description	Cancels changes and resets to original values.
Type	(notetakerName?: string, onCancelCallback?: () => ...) => void

handleDisable

Description	Disables Notetaker for the synced calendar.
Type	(calendarId: string, grantId: string, fallbackNotetakerName?: string, onUpdate?: (data: ...) => ..., onError?: (error: ...) => ..., onCancel?: () => ...) => Promise<void>

handleSave

Description	Saves Notetaker settings for the synced calendar.
Type	(calendarId: string, grantId: string, onUpdate?: (data: ...) => ..., onError?: (error: ...) => ...) => Promise<void>

hasChanges

Description	Indicates that the user made changes.
Type	boolean
Default	false

isLoading

Description	Indicates that the component is loading.
Type	boolean
Default	false

name

Description	The name for the calendar sync.
Type	string

reset

Description	Resets the store and all form fields to their default values.
Type	() => void

selectedFilters

Description	A list of selected meeting filters.
Type	MeetingFilter[]

selectedRecordingTypes

Description	A list of selected recording types (video, audio, or transcript).
Type	RecordingType[]

setAdvancedSettings

Description	Sets the visibility of the Advanced Settings section.
Type	(show: boolean) => void

setCalendar

Description	Sets the calendar.
Type	(calendar: null | Calendar) => void

setHasChanges

Description	Sets whether the user made changes.
Type	(hasChanges: boolean) => void

setIsLoading

Description	Sets the loading state.
Type	(isLoading: boolean) => void

setName

Description	Sets the name for the calendar sync.
Type	(name: string) => void

setSelectedFilters

Description	Sets the selected meeting filters.
Type	(filters: MeetingFilter[]) => void

setSelectedRecordingTypes

Description	Sets the selected recording types.
Type	(types: RecordingType[]) => void

toggleMeetingFilter

Description	Toggles the specified meeting filter on or off.
Type	(filter: MeetingFilter) => void

toggleRecordingType

Description	Toggles the specified recording type on or off.
Type	(type: RecordingType) => void