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...
- Add a preview button.
- Disable the feedback option.
- Disable the Scheduling Page manager view.
- Arrange components in
composable
mode. - Customize event handlers.
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 enableUserFeedback="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>