NylasSchedulerEditor component

The NylasSchedulerEditor component is a form that allows users to configure the settings for the Nylas Scheduler.

PreviewCode

import React from "react";
import { NylasSchedulerEditor } from "@nylas/react";

function App() {
return (
<NylasSchedulerEditor
  mode="composable"
  // Authentication configuration
  nylasSessionsConfig={{
    clientId: "<NYLAS_CLIENT_ID>",
    redirectUri: `/scheduler-editor`,
    domain: "https://api.us.nylas.com/v3",
    hosted: true,
    accessType: "offline",
  }}
  // Enable different event types
  enableEventTypes={{
    one_on_one: true,
    collective: true,
    max_fairness: true,
    max_availability: true,
    group: true,
  }}
  // Add Zoom conferencing support
  conferenceProviders={{
    zoom: "<NYLAS_GRANT_ID>",
  }}
  // Customize localization
  localization={{
    en: {
      availabilityTab: "Open Slots",
      nextButton: "Continue",
    },
  }}
  // Enable user feedback
  enableUserFeedback={true}
  // Show Nylas branding
  nylasBranding={true}
  // Event handlers
  eventOverrides={{
    schedulerConfigChanged: async (event: {
      type: string;
      data: unknown;
    }) => {
      console.log("Scheduler config changed:", event);
    },
  }}
/>
);
}

export default App;

Properties

additionalParticipants?

Name	additionalParticipants
Description	Used to populate the additional participants and their availability in the Scheduler Editor.
Type	AdditionalParticipant[]

conferenceProviders?

Name	conferenceProviders
Description	Used to populate the conference provider options in the Editor. The key is the provider name (zoom) and the value is the grant ID. We currently support same provider (google, microsoft) for all participants and zoom for cross-provider conferencing.
Type	Record<string, string>

configurationId?

Name	configurationId
Description	The Configuration ID to use for the Scheduler Editor. If provided, the Scheduler Editor will try and fetch the Configuration with the provided ID. If found, it automatically loads the Editor with the Configuration settings for editing.
Type	string

defaultAuthArgs?

Name	defaultAuthArgs
Description	The default authentication arguments to use when authenticating a user.
Type	AuthArgs[]

defaultLanguage?

Name	defaultLanguage
Description	Set a default language for the Nylas Scheduling Page.
Type	LANGUAGE_CODE

defaultSchedulerConfigState?

Name	defaultSchedulerConfigState
Description	The default Scheduler config store state. Used to set the initial state of the Scheduler config store. This state can be used to pass defaults to newly created Configurations.
Type	Partial<NylasSchedulerConfigStoreState>

enableEventTypes?

Name	enableEventTypes
Description	Controls which event types are enabled in the Scheduler. You can disable specific event types by setting them to false. At least one event type must remain enabled at all times. If only one event type is enabled, the event type selection screen will be skipped.
Type	EnableEventTypes
Default	{ one_on_one: true, collective: true, max_fairness: true, max_availability: true, group: true }

enableUserFeedback?

Name	enableUserFeedback
Description	Indicates if the user feedback feature is enabled. When enabled, the user feedback feature will be available in the edit mode.
Type	boolean
Default	true

eventOverrides?

Name	eventOverrides
Description	Provides a way to override the default event handlers.
Type	SchedulerEditorEventOverride
Default	{}

experimentalFeatures?

Name	experimentalFeatures
Description	Opts in to experimental features (for example, { 'group_events': true }).
Type	Record<EXPERIMENTAL_FEATURES, boolean>

hideEditorTabs?

Name	hideEditorTabs
Description	Hides tabs in the Editor. Available tabs are: eventInfo, availability, participants, bookingOptions, bookingForm.
Type	Tab[]
Default	[]

localization?

Name	localization
Description	Allows you to override the default localization strings for each language. Nylas Scheduling Pages currently support the following language codes: en, es, fr, de, sv, zh, ja, nl.
Type	Partial<Record<LANGUAGE_CODE, Locale>>

mode?

Name	mode
Description	Used to set the mode for the Scheduler Config. The mode can be app or composable.
Type	app | composable
Default	app

nylasApiRequest?

Name	nylasApiRequest
Description	The Nylas API Request instance. Used to make requests to the Nylas API.
Type	NylasApiRequest

nylasBranding?

Name	nylasBranding
Description	Allows you to show/hide the option to manage Nylas branding in the email template. When enabled, the option to show/hide Nylas branding will be shown in the email template.
Type	boolean
Default	true

nylasSessionsConfig?

Name	nylasSessionsConfig
Description	Used to configure the Nylas Sessions instance.
Type	Config

requiresSlug?

Name	requiresSlug
Description	Indicates if a slug is required for the Configuration. When set to true, the user must enter a slug when creating or editing a Configuration. If using Nylas-hosted Scheduling Pages, the schedulerPreviewLink prop can be set to redirect to a public Configuration as follows: https://book.nylas.com/us/<NYLAS_CLIENT_ID>/{slug}. us denotes the region. Replace it with the appropriate region of your application. Replace <NYLAS_CLIENT_ID> with your Nylas application’s client ID. The {slug} placeholder is replaced with the appropriate slug when the scheduler preview button is clicked. Note: Nylas-hosted Scheduling Pages are only available for public Configurations.
Type	boolean
default	false

schedulerPreviewLink?

Name	schedulerPreviewLink
Description	The Scheduler preview link used when the user clicks the preview button. If requiresSlug is true, you can use the placeholder {slug} to insert the slug in the link for Nylas-hosted Scheduling Pages. Additionally, you can use the placeholder {config.id} to insert the Configuration ID anywhere in the link. For example: https://book.nylas.com/us/<NYLAS_CLIENT_ID>/{config.id}. us denotes the region. Replace it with the appropriate region of your application. Replace <NYLAS_CLIENT_ID> with your Nylas app client ID. Note: Nylas-hosted Scheduling Pages are only available for public Configurations.
Type	string
default	' '

Slots

Slot	Description
custom-page-style-inputs	Used in app mode to pass a custom page style form to the nylas-page-styling component.
login-required	Used to display a message when the user is not logged in.

Events

Event	Description
init	Fired when the provider is initialized. By default, this event handles determining if the user is logged in or not. In addition, it fetches the provided Configuration if a valid Configuration ID is provided.
loggedIn	Fired when the the isAuthenticated state changes to true.
loggedOut	Fired when the the isAuthenticated state changes to false.
schedulerConfigCloseClicked	Fired when the close button on Scheduler Config is clicked.

CSS parts

Part	Description
nse__close-button	The close button of the Scheduler Editor. Use this part to hide the close button.
nse__content	The content of the Scheduler Editor. Use this part to adjust the height of the Editor.
nse__header	The header of the Scheduler Editor.
nse__language
nse__list-configurations	The list of Configurations. Use this part to adjust the height of the list.
nse__login-required	The login required component.
nse__login-required-card	The card of the login required component.
nse__login-required-disclaimer-text	The icon of the login required component.
nse__login-required-google-button	The Google button of the login required component.
nse__login-required-microsoft-button	The Microsoft button of the login required component.
nse__login-required-other-provider-button	The other provider button of the login required component.
nse__login-required-text	The text of the login required component.
nse__title	The title of the Scheduler Editor.

Code samples

BasicConfig IDConference providersCustom event typesEvent handlersCustom theme

import React from "react";
import { NylasSchedulerEditor } from "@nylas/react";

function App() {
  return (
    <NylasSchedulerEditor
      defaultAuthArgs={[{ grant_id: "<NYLAS_GRANT_ID>" }]}
    />
  );
}

import React from "react";
import { NylasSchedulerEditor } from "@nylas/react";

function App() {
  return (
    <NylasSchedulerEditor
      configurationId="<CONFIGURATION_ID>"
      defaultAuthArgs={[{ grant_id: "<NYLAS_GRANT_ID>" }]}
    />
  );
}

import React from "react";
import { NylasSchedulerEditor } from "@nylas/react";

function App() {
  return (
    <NylasSchedulerEditor
      defaultAuthArgs={[{ grant_id: "<NYLAS_GRANT_ID>" }]}
      conferenceProviders={{
        zoom: "<ZOOM_GRANT_ID>",
        google: "<GOOGLE_GRANT_ID>"
      }}
    />
  );
}

import React from "react";
import { NylasSchedulerEditor } from "@nylas/react";

function App() {
  return (
    <NylasSchedulerEditor
      defaultAuthArgs={[{ grant_id: "<NYLAS_GRANT_ID>" }]}
      enableEventTypes={{
        one_on_one: true,
        collective: false,
        max_fairness: true,
        max_availability: false,
        group: true
      }}
    />
  );
}

import React from "react";
import { NylasSchedulerEditor } from "@nylas/react";

function App() {
  const handleConfigCreated = (event) => {
    console.log('Configuration created:', event.detail);
  };

  const handleConfigChanged = (event) => {
    console.log('Configuration changed:', event.detail);
  };

  const handleFormSubmitted = (event) => {
    console.log('Form submitted');
  };

  return (
    <NylasSchedulerEditor
      defaultAuthArgs={[{ grant_id: "<NYLAS_GRANT_ID>" }]}
      onSchedulerConfigCreated={handleConfigCreated}
      onSchedulerConfigChanged={handleConfigChanged}
      onFormSubmitted={handleFormSubmitted}
    />
  );
}

import React from "react";
import { NylasSchedulerEditor } from "@nylas/react";

function App() {
  return (
    <NylasSchedulerEditor
      defaultAuthArgs={[{ grant_id: "<NYLAS_GRANT_ID>" }]}
      themeConfig={{
        "--nylas-primary": "#007bff",
        "--nylas-base-100": "#ffffff",
        "--nylas-border-radius": "8px"
      }}
    />
  );
}