Version:
Only show these results:

Using the Scheduler Editor Component

This page explains how to customize the Scheduler Editor so organizers can easily manage their Scheduling Pages. You'll learn how to...

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.

You can use composable mode 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 feedback option

By default, the Scheduler Editor includes a feedback option that allows users to provide feedback or report errors to Nylas. If you want to hide the feedback button in the UI, set enableUserFeedback to false for the Scheduler Editor Component.

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

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 composable mode to customize how each sub-component is arranged and rendered in the UI. When you use the composable mode, you should add sub-components directly under nylas-scheduler-editor rather than wrapping them with nylas-editor-tabs.

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

<html>
  <body>
    <nylas-scheduler-editor mode="composable">
      <!-- Add sub-components -->
      <nylas-calendar-picker />
      <nylas-availability-picker />
    <nylas-scheduler-editor />
      
    <!-- Configure the Nylas Scheduler Editor Component -->
    <script type="module">
      
      import { defineCustomElement } from "https://cdn.jsdelivr.net/npm/@nylas/web-elements@latest/dist/cdn/nylas-scheduler-editor/nylas-scheduler-editor.es.js";
      
      defineCustomElement();

      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',
  }}
>
  // Add sub-components
  <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>
  <body>
    <nylas-scheduler-editor />
      
    <!-- Configure the Nylas Scheduler Editor Component -->
    <script type="module">
      
      import { defineCustomElement } from "https://cdn.jsdelivr.net/npm/@nylas/web-elements@latest/dist/cdn/nylas-scheduler-editor/nylas-scheduler-editor.es.js";
      
      defineCustomElement();

      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>