nylas-editor-tabs-group

The nylas-editor-tabs-group 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 element directly or set any props manually, as its behavior is fully managed by the parent component.

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

export default function NylasEditorTabsGroupExample() {
return (
<div className="inline-block border border-dashed border-gray-300 rounded-md p-4 justify-center">
  <NylasEditorTabsGroup
    selectedLanguage="en"
    themeConfig={{
      '--nylas-primary': '#007bff',
      '--nylas-base-100': '#ffffff'
    }}
  />
</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`

`selectedGroupEvent?`


Name	`selectedGroupEvent`
Description	The selected group event.
Type	`GroupEventAPIData \| 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 \| GroupConfiguration)[] \| 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’ i’s an optional prop is used to hide tabs in the editor. Available tabs are: `eventInfo`, `availability`, `participants`, `bookingOptions`, and `bookingForm`.
Type	`TabGroup[] \| 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 element.
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 group 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.
`groupEventCreateTriggered`	Event emitted when the user requests to create a new group event in the calendar view. This fires when the create button is clicked and validation passes.
`groupEventDeleteTriggered`	Event emitted when the user requests to delete a group event. This fires when the delete button is clicked and includes the recurrence delete option chosen by the user.
`groupEventImportTriggered`	Event emitted when the user requests to import group events from an external source. This fires when the import action is triggered in the calendar view.
`groupEventUpdateTriggered`	Event emitted when the user requests to save changes to an existing group event. This fires after validation passes and includes the recurrence update option chosen by the user.
`nylasSchedulerError`	Event emitted when the element 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.
`saveGroupEventChangesError`	Event emitted when validation errors prevent saving changes to a group event. This provides error details for handling failed save attempts.
`schedulerConfigChanged`	Event emitted when the group 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 group 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 group Scheduler Editor. This provides real-time updates as users modify form inputs.

Methods

`resetError() => Promise<void>`

Resets the error state of the editor.

Type returned: Promise<void>

`schedulerConfigCreatedEventHandler(data: SchedulerGroupEventDetail & { host: HTMLNylasEditorTabsGroupElement; }) => Promise<CustomEvent<SchedulerGroupEventDetail & { host: HTMLNylasEditorTabsGroupElement; }>>`

Event handler for the Scheduler Configuration created event.

Parameter	Type
`data`	`SchedulerGroupEventDetail & { host: HTMLNylasEditorTabsGroupElement; }`

Type returned: Promise<CustomEvent<SchedulerGroupEventDetail & { host: HTMLNylasEditorTabsGroupElement; }>>

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

Sets the error state of the editor.

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__return-to-calendar-view`
`editor__tab`	The tabs container.
`editor__tab-content`	The tab content container.
`editor__tabs`
`editortab__booking-form`
`editortab__booking-options`
`editortab__communications`
`editortab__page-styles`
`nset__header__back-button`

`nylas-additional-participants`

Part	Description
`nap__add-participant`	The add participant button of the element.
`nap__add-time-range`	The add time range button.
`nap__availability`	The availability container.
`nap__content`	The content of the element.
`nap__day`	The day container.
`nap__header`	The header of the availability picker.
`nap__input`	The input of the element.
`nap__remove-participant`	The remove participant button of the element.
`nap__select-timezone`	The time zone selection container.
`nap__select-timezone-button`	The time zone selection button.
`nap__select-timezone-dropdown-content`	The time zone selection dropdown content.
`nap__subtitle`	The subtitle of the element.
`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.
`nap__title`	The title of the element.

`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 text area.

`nylas-event-duration`

Part	Description
`ned`	The event duration container.
`ned__dropdown`	The dropdown container for the duration increment.
`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 text area.

`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__return-to-calendar-view`
`net__tab-booking-form`
`net__tab-booking-options`
`net__tab-communications`
`net__tab-content`
`net__tab-page-styles`
`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-group element is automatically included in the main NylasSchedulerEditor component. The following code samples show how to use the element on its own.

// Listen for group event creation
element.addEventListener('groupEventCreateTriggered', (event) => {
  const { groupEvent, configId } = event.detail;
  console.log('Group event creation triggered:', { groupEvent, configId });

  // Handle group event creation
  handleGroupEventCreation(groupEvent, configId);
});

// Listen for group event updates
element.addEventListener('groupEventUpdateTriggered', (event) => {
  const { groupEvent, chosenOption, configId } = event.detail;
  console.log('Group event update triggered:', { groupEvent, chosenOption, configId });

  // Handle group event update
  handleGroupEventUpdate(groupEvent, chosenOption, configId);
});

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

  // Handle configuration change
  handleGroupConfigChange(configData);
});

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