Version:
Only show these results:
public-beta

Using the Scheduler Editor Component

This feature is in public beta. It is generally stable, but some features might be added or changed before it is generally available.

In this tutorial, you'll learn how to customize the Scheduler Editor so that organizers can easily manage their Scheduling Pages.

App versus Composable mode

The Scheduler UI Components support two configuration modes: app and composable.

The default mode is app. It allows the Scheduler Editor Component to render all sub-components by default. You can embed the pre-built components in your application with the minimum configuration.

The composable mode enables you to customize how each sub-component is arranged and rendered in the UI. You can use sub-components as standalone components.

For more information on each component, see the Scheduler Editor Component reference documentation.

Custom event handlers

Event handlers in Scheduler respond to user actions and control the operation that follows. Each event handler is associated with a specific type of event, such as formSubmitted, schedulerConfigChanged, and previewButtonClicked.

The eventOverrides property allows you to customize the default event handlers so that you can implement specific logic or behavior for end user actions in Scheduler. For example, you can add or remove steps in your booking flow, track user interactions for analytics, update available time slots when the user selects a different date, and more.

For a use case example, see Customize event handlers.

Add a preview button

You can add schedulerPreviewLink to set the URL for the preview button in the Scheduling Page manager view. When organizers click the preview button, they can view the Scheduling Page.

<html>
  <body>
    <nylas-scheduler-editor />
      
    <script type="module">
      // ...Scheduler Editor Configuration
      schedulerEditor.schedulerPreviewLink = `${window.location.origin}/?config_id={config.id}`
    </script>
  </body>
</html>   
 <NylasSchedulerEditor
  schedulerPreviewLink={`${window.location.origin}/?config_id={config.id}`}
  ...
/>

Disable the Scheduling Page manager view

You can set configurationId to disable the manager view and load the edit view for a specific Scheduling Page.

<html>
  <body>
    <nylas-scheduler-editor />
      
    <script type="module">
      // ...Scheduler Editor Configuration
      schedulerEditor.configurationId = "<SCHEDULER_CONFIG_ID>"
    </script>
  </body>
</html>   
<NylasSchedulerEditor
  configurationId="<SCHEDULER_CONFIG_ID>"
  ...
/>

Arrange components in composable mode

You can use the composable mode to customize how each sub-component is arranged and rendered in the UI.

The following example removes the default navigation tabs and displays the calendar picker and availability picker in one view.

<html>
  <head>
    <script type="module" src="https://unpkg.com/@nylas/web-elements@canary"></script>
  </head>
  <body>
    <nylas-scheduler-editor mode="composable">
      <nylas-calendar-picker />
      <nylas-availability-picker />
    <nylas-scheduler-editor />
      
    <!-- Configure the Nylas Scheduler Editor Component -->
    <script type="module">
      const schedulerEditor = document.querySelector('nylas-scheduler-editor');
      schedulerEditor.nylasSessionsConfig = {
        clientId: 'NYLAS_CLIENT_ID', // Replace with your Nylas client ID
        redirectUri: `${window.location.origin}/scheduler-editor`,
        domain: 'https://api.us.nylas.com/v3', // or 'https://api.eu.nylas.com/v3' for EU data center
        hosted: true,
        accessType: 'offline',
      }
    </script>
  </body>
</html>   
<NylasSchedulerEditor
  nylasSessionsConfig={{
    clientId: "<NYLAS_CLIENT_ID>", // Replace with your Nylas client ID
    redirectUri: `${window.location.origin}/scheduler-editor`,
    domain: "https://api.us.nylas.com/v3", // or 'https://api.eu.nylas.com/v3' for EU data center
    hosted: true,
    accessType: 'offline',
  }}
>
  <NylasCalendarPicker />
  <NylasAvailabilityPicker />
</NylasSchedulerEditor>

Customize event handlers

You can use the eventOverrides property to customize the default event handlers.

In the following example, you can define custom logic to perform after the schedulerConfigChanged event is triggered.

<html>
  <head>
    <script type="module" src="https://unpkg.com/@nylas/web-elements@canary"></script>
  </head>
  <body>
    <nylas-scheduler-editor />
      
    <!-- Configure the Nylas Scheduler Editor Component -->
    <script type="module">
      const schedulerEditor = document.querySelector('nylas-scheduler-editor');
      schedulerEditor.eventOverrides = {
        schedulerConfigChanged: async (event) => {
          // Any task that you want to perform
          console.log(event)
        }
      }
    </script>
  </body>
</html>   
<NylasSchedulerEditor
  eventOverrides = {{
      schedulerConfigChanged: async (event) => {
        // Any task that you want to perform
        console.log(event)
      }
  }}
  >
</NylasSchedulerEditor>