nylas-editor-tabs

The nylas-editor-tabs element provides the user interface for managing editor tabs within the Scheduler Editor. It’s primarily used to control the edit mode of the Scheduler Editor, and is rendered automatically by the parent component, nylas-scheduler-editor, during editing. There is no need to interact with this component directly or set any props manually, as its behavior is fully managed by the parent component.

import { NylasEditorTabs } from '@nylas/react';

export default function NylasEditorTabsExample() {
return (
<div className="inline-block border border-dashed border-gray-300 rounded-md p-4 justify-center">
  <NylasEditorTabs />
</div>
);
}

Properties

`selectedEventType?`


Name	`selectedEventType`
Description	The selected event type.
Type	`CONFIGURATION_EVENT_TYPE.collective \| CONFIGURATION_EVENT_TYPE.group \|` `CONFIGURATION_EVENT_TYPE.max_availability \| CONFIGURATION_EVENT_TYPE.max_fairness \|` `CONFIGURATION_EVENT_TYPE.one_on_one \| undefined`

`selectedLanguage?`


Name	`selectedLanguage`
Description	The selected language.
Type	`LANGUAGE_CODE.de \| LANGUAGE_CODE.en \| LANGUAGE_CODE.es \| LANGUAGE_CODE.fr \| LANGUAGE_CODE.ja \|` `LANGUAGE_CODE.ko \| LANGUAGE_CODE.nl \| LANGUAGE_CODE.sv \| LANGUAGE_CODE.zh \| undefined`

Standalone properties

The following props are automatically configured when used within NylasSchedulerEditor. Set these props manually only if you’re using the component independently.

`calendars?`


Name	`calendars`
Description	The list of calendars to use in the editor when configuring availability.
Type	`Calendar[] \| undefined`

`configurations?`


Name	`configurations`
Description	The list of Configurations.
Type	`Configuration[] \| undefined`

`currentUser?`


Name	`currentUser`
Description	The current logged in user.
Type	`undefined \| { id: string; email: string; name?: string \| undefined; provider?: string \|` `undefined; }`

`enableUserFeedback?`


Name	`enableUserFeedback`
Description	This prop is passed down by the parent component to enable or disable user feedback.
Type	boolean \| `undefined`
Default	`true`

`hideEditorTabs?`


Name	`hideEditorTabs`
Description	This prop is passed down by the parent component. It’s an optional prop used to hide tabs in the Editor. Available tabs are: `eventInfo`, `availability`, `participants`, `bookingOptions`, and `bookingForm`.
Type	`Tab[] \| undefined`
Default.	`[]`

`mode?`


Name	`mode`
Description	The mode of the editor. `app`: The Editor is used as a standalone app. `composable`: The Editor is used as a composable component.
Type	`app" \| "composable" \| undefined`
Default	`app`

`schedulerPreviewLink?`


Name	`schedulerPreviewLink`
Description	The Scheduler preview link to use when the user clicks on the preview button. You can use a placeholder `{config.id}` to replace the Configuration ID anywhere in the link.
Type	string
Default	`' '`

`selectedConfiguration?`


Name	`selectedConfiguration`
Description	The selected Configuration to use in the Editor when editing an existing Configuration or creating a new one.
Type	`Configuration \| undefined`

`themeConfig?`


Name	`themeConfig`
Description	The theme configuration.
Type	`undefined \| { '--nylas-primary'?: string \| undefined; '--nylas-info'?: string \| undefined;` `'--nylas-success'?: string \| undefined; '--nylas-warning'?: string \| undefined;` `'--nylas-error'?: string \| undefined; '--nylas-error-pressed'?: string \| undefined;` `'--nylas-base-0'?: string \| undefined; '--nylas-base-25'?: string \| undefined;` `'--nylas-base-50'?: string \| undefined; '--nylas-base-100'?: string \| undefined;` `'--nylas-base-200'?: string \| undefined; '--nylas-base-300'?: string \| undefined;` `'--nylas-base-400'?: string \| undefined; '--nylas-base-500'?: string \| undefined;` `'--nylas-base-600'?: string \| undefined; '--nylas-base-700'?: string \| undefined;` `'--nylas-base-800'?: string \| undefined; '--nylas-base-900'?: string \| undefined;` `'--nylas-base-950'?: string \| undefined; '--nylas-color-blue-50'?: string \| undefined;` `'--nylas-color-blue-100'?: string \| undefined; '--nylas-color-blue-300'?: string \| undefined;` `'--nylas-color-blue-500'?: string \| undefined; '--nylas-color-blue-700'?: string \| undefined;` `'--nylas-color-blue-900'?: string \| undefined; '--nylas-color-red-50'?: string \| undefined;` `'--nylas-color-red-100'?: string \| undefined; '--nylas-color-red-300'?: string \| undefined;` `'--nylas-color-red-500'?: string \| undefined; '--nylas-color-red-700'?: string \| undefined;` `'--nylas-color-red-900'?: string \| undefined; '--nylas-color-green-50'?: string \| undefined;` `'--nylas-color-green-100'?: string \| undefined; '--nylas-color-green-300'?: string \|` `undefined;'--nylas-color-green-500'?: string \| undefined; '--nylas-color-green-700'?: string \|` `undefined; '--nylas-color-green-900'?: string \| undefined; '--nylas-color-yellow-50'?: string` `\| undefined; '--nylas-color-yellow-100'?: string \| undefined; '--nylas-color-yellow-300'?:` `string \| undefined; '--nylas-color-yellow-500'?: string \| undefined;` `'--nylas-color-yellow-700'?: string \| undefined; '--nylas-color-yellow-900'?: string` `\| undefined; '--nylas-color-purple-50'?: string \| undefined; '--nylas-color-purple-100'?:` `string \| undefined; '--nylas-color-purple-300'?: string \| undefined;` `'--nylas-color-purple-500'?: string \| undefined; '--nylas-color-purple-700'?: string \|` `undefined; '--nylas-color-purple-900'?: string \| undefined; '--nylas-color-sky-50'?: string \|` `undefined; '--nylas-color-sky-100'?: string \| undefined; '--nylas-color-sky-300'?: string \|` `undefined; '--nylas-color-sky-500'?: string \| undefined; '--nylas-color-sky-700'?: string \|` `undefined; '--nylas-color-sky-900'?: string \| undefined; '--nylas-color-black'?: string \|` `undefined; '--nylas-color-grey-900'?: string \| undefined; '--nylas-color-grey-800'?: string \|` `undefined; '--nylas-color-grey-700'?: string \| undefined; '--nylas-color-grey-600'?: string \|` `undefined; '--nylas-color-grey-500'?: string \| undefined; '--nylas-color-grey-400'?: string \|` `undefined; '--nylas-color-grey-300'?: string \| undefined; '--nylas-color-grey-200'?: string \|` `undefined; '--nylas-color-grey-100'?: string \| undefined; '--nylas-color-grey-50'?: string \|` `undefined; '--nylas-color-white'?: string \| undefined; '--nylas-font-family'?: string \|` `undefined; '--nylas-font-size'?: string \| undefined; '--nylas-border-radius'?: string \|` `undefined; '--nylas-border-radius-2x'?: string \| undefined; '--nylas-border-radius-3x'?:` `string \| undefined; }`

Events

Event	Description
`cancelButtonClick`	Event emitted when the user clicks the cancel button to exit the Scheduler Editor.
`dismissNotification`	Event emitted when the user dismisses an error notification, allowing parent components to handle cleanup or additional actions.
`formSubmitted`	Event emitted at the very beginning of form submission, before any validation occurs. This event is cancelable and can prevent the submission process if `preventDefault()` is called.
`nylasSchedulerError`	Event emitted when the component needs to display an error notification to the user. This includes validation errors, API errors, and other component-level errors.
`previewButtonClicked`	Event emitted when the user clicks the preview button. This fires before the preview link is opened and can be used to override the default preview behavior.
`schedulerConfigChanged`	Event emitted when the Scheduler Configuration form is submitted and ready to be processed (before the API request is made). This fires for both create and edit actions after client-side validation passes.
`schedulerConfigCreated`	Event emitted when a Scheduler Configuration is successfully created via the API. This fires only for create actions after the API request completes successfully.
`schedulerEditorFormUpdated`	Event emitted whenever any form field value changes within the Scheduler Editor. This provides real-time updates as users modify form inputs.

Methods

`resetError() => Promise<void>`

Type returned: Promise<void>

`schedulerConfigCreatedEventHandler(data: SchedulerEventDetail) => Promise<CustomEvent<SchedulerEventDetail>>`

Parameter	Type
`data`	`{ config: Partial<Configuration>; action: "create" \| "edit"; host: HTMLNylasEditorTabsElement;` `resetLoadingState?: ((e: CustomEvent<any>) => void) \| undefined; }`

Type returned: Promise<CustomEvent<SchedulerEventDetail>>

`setError(error: { message: string; type: NotificationType; category: ErrorCategory; title: string; }) => Promise<void>`

Parameter	Type
`error`	`{ message: string; type: NotificationType; category: ErrorCategory; title: string; }`

Type returned: Promise<void>

CSS parts

Part	Description
`editor__footer`	The footer container.
`editor__footer-buttons`	The buttons container.
`editor__footer-cancel`
`editor__footer-cta`
`editor__footer-preview`	The preview button container.
`editor__form-contents`	The form contents container.
`editor__tab`	The tabs container.
`editor__tab-content`	The tab content container.
`editor__tabs`
`editortab__availability`
`editortab__booking-form`
`editortab__booking-options`
`editortab__communications`
`editortab__event-info`
`editortab__page-styles`
`editortab__participants`

`nylas-additional-participants`

Part	Description
`nap__add-participant`	The add participant button of the component.
`nap__content`	The content of the component.
`nap__input`	The input of the component.
`nap__remove-participant`	The remove participant button of the component.
`nap__subtitle`	The subtitle of the component.
`nap__title`	The title of the component.

`nylas-availability-picker`

Part	Description
`nap__add-time-range`	The add time range button.
`nap__availability`	The availability container.
`nap__day`	The day container.
`nap__header`	The header of the availability picker.
`nap__select-timezone`	The timezone selection container.
`nap__select-timezone-button`	The timezone selection button.
`nap__select-timezone-dropdown-content`	The timezone selection dropdown content.
`nap__time-picker-container`	The time picker container.
`nap__time-picker-input`	The time picker input.
`nap__time-picker-times`	The time picker times.
`nap__time-range`	The time range container.
`nap__time-ranges`	The time ranges container.

`nylas-booking-calendar-picker`

Part	Description
`nbcp`	The booking calendar picker container.
`nbcp__dropdown`	The dropdown container.
`nbcp__dropdown-button`	The dropdown button.
`nbcp__dropdown-content`	The dropdown content.
`nbcp__header`	The header of the booking calendar picker.
`nbcp__input-label`	The input label of the booking calendar picker.

`nylas-buffer-time`

Part	Description
`nbt`	The buffer time container.
`nbt__body`	The body of the buffer time.
`nbt__dropdown-after`	The after buffer dropdown container.
`nbt__dropdown-before`	The before buffer dropdown container.
`nbt__dropdown-button-after`	The after buffer dropdown button.
`nbt__dropdown-button-before`	The before buffer dropdown button.
`nbt__dropdown-content-after`	The after buffer dropdown content.
`nbt__dropdown-content-before`	The before buffer dropdown content.
`nbt__header`	The header of the buffer time.
`nbt__preview`	The buffer time preview.

`nylas-custom-booking-flow`

Part	Description
`ncbf`	The custom booking flow container.
`ncbf__dropdown`	The dropdown container.
`ncbf__dropdown-button`	The dropdown button.
`ncbf__dropdown-content`	The dropdown content.
`ncbf__header`	The header of the custom booking flow.

`nylas-customize-booking-settings`

Part	Description
`ncbs`	The booking calendar picker container.
`ncbs__additional_guests`	The additional guests setting.
`ncbs__cancellation_options`	The cancellation options setting.
`ncbs__header`	The header of the booking calendar picker.
`ncbs__rescheduling_options`	The rescheduling options setting.
`ncbs__settings`	The settings container.
`ncbs__settings-div`	The div inside the settings container that contains the checkbox and tooltip for each setting.

`nylas-calendar-picker`

Part	Description
`ncp`	The calendar picker container.
`ncp__dropdown`	The dropdown container.
`ncp__dropdown-button`	The dropdown button.
`ncp__dropdown-content`	The dropdown content.
`ncp__header`	The header of the calendar picker.

`nylas-cancellation-policy`

Part	Description
`ncpolicy`	The cancellation policy container.
`ncpolicy__textarea`	The cancellation policy textarea.

`nylas-event-duration`

Part	Description
`ned`	The event duration container.
`ned__dropdown`	The dropdown container for the duration element.
`ned__dropdown-button`	The dropdown button for the duration increment.
`ned__dropdown-content`	The dropdown content for the duration increment.
`ned__input_dropdown`	The input dropdown container for the duration minutes.
`ned__input_dropdown-content`	The dropdown content for the input duration minutes.
`ned__input_dropdown-input`	The input for the duration minutes.

`nylas-event-description`

Part	Description
`nedesc`	The event description container.
`nedesc__textarea`	The event description textarea.

`nylas-event-location`

Part	Description
`nel`	The event location container.
`nel__dropdown`	The dropdown container.
`nel__dropdown-button`	The dropdown button.
`nel__dropdown-content`	The dropdown content.
`nel__location`	The event location input.

`nylas-event-title`

Part	Description
`net`	The event title container.
`net__dropdown-content`	The token options container.
`net__footer`
`net__footer-buttons`
`net__footer-cancel`
`net__footer-cta`
`net__footer-preview`
`net__form-contents`
`net__tab-availability`
`net__tab-booking-form`
`net__tab-booking-options`
`net__tab-communications`
`net__tab-content`
`net__tab-event-info`
`net__tab-page-styles`
`net__tab-participants`
`net__tabs`
`net__title`	The event title input.

`nylas-limit-future-bookings`

Part	Description
`nlfb`	The limit future bookings container.
`nlfb__number-dropdown`	The number dropdown container.
`nlfb__number-dropdown-button`	The number dropdown button.
`nlfb__number-dropdown-content`	The number dropdown content.
`nlfb__period-dropdown`	The period dropdown container.
`nlfb__period-dropdown-button`	The period dropdown button.
`nlfb__period-dropdown-content`	The period dropdown content.

`nylas-min-booking-notice`

Part	Description
`nmbn`	The minimum booking notice container.
`nmbn__number-dropdown`	The number dropdown container.
`nmbn__number-dropdown-button`	The number dropdown button.
`nmbn__number-dropdown-content`	The number dropdown content.
`nmbn__period-dropdown`	The period dropdown container.
`nmbn__period-dropdown-button`	The period dropdown button.
`nmbn__period-dropdown-content`	The period dropdown content.

`nylas-min-cancellation-notice`

Part	Description
`nmcn`	The minimum cancellation notice container.
`nmcn__number-dropdown`	The number dropdown container.
`nmcn__number-dropdown-button`	The number dropdown button.
`nmcn__number-dropdown-content`	The number dropdown content.
`nmcn__period-dropdown`	The period dropdown container.
`nmcn__period-dropdown-button`	The period dropdown button.
`nmcn__period-dropdown-content`	The period dropdown content.

`nylas-participants-custom-availability`

Part	Description
`npca`	The participants custom availability container.
`npca__content`	The content of the participants custom availability.
`npca__header`	The header of the participants custom availability.
`npca__participant-container`	The participant container.
`npca__participant-title`	The participant title.
`npca__participant-toggle--container`	The participant toggle container.
`npca__toggle-input`	The toggle input.
`npca__toggle-label`	The toggle label.
`npca__toggle-slider`	The toggle slider.

`nylas-page-name`

Part	Description
`npn`	The `nylas-page-name` container.
`npn__body`	The body of the event communication section.
`npn__drawer-toggle--container`	The card’s drawer toggle container.
`npn__header`	The header of the event communication section.
`npn__input-textfield`	The page name textfield.

`nylas-scheduling-method`

Part	Description
`nsm`	The booking calendar picker container.
`nsm__dropdown`	The dropdown container.
`nsm__dropdown-button`	The dropdown button.
`nsm__dropdown-content`	The dropdown content.
`nsm__header`	The header of the booking calendar picker.
`nsm__input-label`	The input label of the booking calendar picker.

`nylas-timeslot-interval`

Part	Description
`nti`	The time slot interval container.
`nti__dropdown`	The dropdown container.
`nti__dropdown-button`	The dropdown button.
`nti__dropdown-content`	The dropdown content.
`nti__header`	The header of the time slot interval picker.
`nti__input-label`	The input label of the time slot interval picker.

Code samples

The nylas-editor-tabs element is automatically included in the main NylasSchedulerEditor component. The following code samples show how to use the element on its own.

// Listen for form submission
element.addEventListener('formSubmitted', (event) => {
  console.log('Form submitted');

  // Handle form submission
  handleFormSubmission();
});

// Listen for configuration changes
element.addEventListener('schedulerConfigChanged', (event) => {
  const { config, action } = event.detail;
  console.log('Config changed:', { config, action });

  // Handle configuration change
  handleConfigChange(config, action);
});

// Listen for form updates
element.addEventListener('schedulerEditorFormUpdated', (event) => {
  const { value, name } = event.detail;
  console.log('Form updated:', { value, name });

  // Handle form update
  handleFormUpdate(value, name);
});

<nylas-editor-tabs
  mode="composable"
  selected-configuration="your-config"
  calendars="your-calendars"
  theme-config='{
    "--nylas-primary": "#007bff",
    "--nylas-base-100": "#ffffff",
    "--nylas-border-radius": "8px"
  }'>
</nylas-editor-tabs>