Scheduler Editor Components
nylas-scheduler-editor
Overview
The nylas-scheduler-editor component is a form that allows users to configure the settings for the Nylas Scheduler.
| Version | 1.1.4 |
| Install (React) | npm install @nylas/react |
| Import (React) | import { NylasSchedulerEditor } from '@nylas/react'; |
| Import (CDN) | <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();
</script> |
Example
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
additionalParticipants | This prop is used to populate the additional participants and their availability in the scheduler editor. | AdditionalParticipant[] | undefined | undefined | |
conferenceProviders | This prop will be used to populate the conference provider options in the editor. The key is the provider name (‘zoom’) and the value is the grant id. We currently support same provider (‘google’, ‘microsoft’) for all participants and ‘zoom’ for cross-provider conferencing. | undefined | { [x: string]: string; } | undefined | |
configurationId | * The configuration id to use for the scheduler editor. If provided, then the scheduler editor will try and fetch the configuration with the provided id. If found, it will automatically load the editor with the configuration settings for editing. | string | undefined | undefined | |
defaultAuthArgs | The default authentication arguments to use when authenticating a user. | AuthArgs[] | undefined | undefined | |
defaultSchedulerConfigState | The default scheduler config store state. Used to set the initial state of the scheduler config store. This state can be used to pass defaults to newly created configurations. | undefined | { selectedConfiguration?: RecursivePartial<Configuration> | undefined; configurations?: Configuration[] | undefined; calendars?: Calendar[] | undefined; currentUser?: User | null | undefined; action?: "create" | "edit" | null | undefined; additionalParticipants?: AdditionalParticipant[] | undefined; listConfigurationsNextCursor?: string | null | undefined; conferenceProviders?: Record<"google" | "microsoft" | "zoom", string> | undefined; requiresSlug?: boolean | undefined; } | undefined | |
enableUserFeedback | Indicates if the user feedback feature is enabled. By default, this is set to true. When enabled, the user feedback feature will be available in the edit mode. To disable the user feedback feature, set this prop to false. | boolean | undefined | true | |
eventOverrides | This provides a way to override the default event handlers. | Partial<{ formSubmitted: (event: CustomEvent<void>, connector?: NylasSchedulerConfigConnectorInterface | undefined) => Promise<void>; schedulerConfigChanged: (event: CustomEvent<SchedulerEventDetail>, connector?: NylasSchedulerConfigConnectorInterface | undefined) => Promise<void>; cancelButtonClick: (event: CustomEvent<void>, connector?: NylasSchedulerConfigConnectorInterface | undefined) => Promise<void>; previewButtonClicked: (event: CustomEvent<HTMLNylasEditorTabsElement>, connector?: NylasSchedulerConfigConnectorInterface | undefined) => Promise<void>; schedulerEditorFormUpdated: (event: CustomEvent<{ value: string; name: string; }>, connector?: NylasSchedulerConfigConnectorInterface | undefined) => Promise<void>; initListConfigurations: (event: CustomEvent<{ host: HTMLNylasListConfigurationsElement; cursor?: string | undefined; }>, connector?: NylasSchedulerConfigConnectorInterface | undefined) => Promise<void>; createButtonClick: (event: CustomEvent<HTMLNylasListConfigurationsElement>, connector?: NylasSchedulerConfigConnectorInterface | undefined) => Promise<void>; editButtonClick: (event: CustomEvent<{ host: HTMLNylasListConfigurationsElement; configuration: Configuration; }>, connector?: NylasSchedulerConfigConnectorInterface | undefined) => Promise<void>; deleteButtonClick: (event: CustomEvent<{ host: HTMLNylasListConfigurationsElement; configuration: Configuration; }>, connector?: NylasSchedulerConfigConnectorInterface | undefined) => Promise<void>; }> & EventOverride<NylasSchedulerConfigConnectorInterface> | {} | |
hideEditorTabs | This optional prop is used to hide tabs in the editor. Available tabs are: eventInfo, availability, participants, bookingOptions, bookingForm | Tab[] | undefined | [] | |
mode | This is used to set the mode for the scheduler config. The mode can be ‘app’ or ‘composable’. The default mode is ‘app’. | "app" | "composable" | 'app' | |
nylasApiRequest | The Nylas Api Request instance. Used to make requests to the Nylas API. | NylasApiRequest | undefined | undefined | |
nylasSessionsConfig | The Nylas Sessions configuration. Used to configure the Nylas Sessions instance. | Config | undefined | undefined | |
requiresSlug | Indicates if a slug is required for the configuration. When set to true, the user must enter a slug when creating or editing a configuration. The slug is used for hosted pages. If using Nylas hosted scheduling pages, the schedulerPreviewLink prop can be set to redirect to a public configuration as follows: https://book.nylas.com/us/<YOUR_NYLAS_APP_CLIENT_ID>/{slug}. us denotes the region. Replace it with the appropriate region of your application. Replace <YOUR_NYLAS_APP_CLIENT_ID> with your Nylas app client ID. The {slug} placeholder is replaced with the appropriate slug when the scheduler preview button is clicked. Note: Nylas hosted scheduling pages are only available for public configurations. | boolean | false | |
schedulerPreviewLink | The scheduler preview link used when the user clicks the preview button. If requiresSlug is true, you can use the placeholder {slug} to insert the slug in the link for Nylas hosted scheduling pages. Additionally, you can use the placeholder {config.id} to insert the configuration ID anywhere in the link. For example: https://book.nylas.com/us/<YOUR_NYLAS_APP_CLIENT_ID>/{slug}. us denotes the region. Replace it with the appropriate region of your application. Replace <YOUR_NYLAS_APP_CLIENT_ID> with your Nylas app client ID. Note: Nylas hosted scheduling pages are only available for public configurations. | string | '' |
Events
| Event | Description | Type |
|---|---|---|
init | This event is fired when the provider is initialized. By default, this event handles determining if the user is logged in or not. In addition, it fetches the provided configuration if a valid configuration id is provided. | CustomEvent<HTMLNylasSchedulerEditorElement> |
loggedIn | This event is fired when the the NylasAuth isAuthenticated state changes to true. | CustomEvent<HTMLNylasSchedulerEditorElement> |
loggedOut | This event is fired when the the NylasAuth isAuthenticated state changes to false. | CustomEvent<HTMLNylasSchedulerEditorElement> |
schedulerConfigCloseClicked | This event is fired when the close button on scheduler config is clicked. | CustomEvent<HTMLNylasSchedulerEditorElement> |
Methods
schedulerConnector() => Promise<NylasSchedulerConfigConnector | undefined>
This method is used to get the NylasSchedulerConfigConnector instance. You can use this instance to make requests to the Nylas API.
Returns
Type: Promise<NylasSchedulerConfigConnector | undefined>
Promise<NylasSchedulerConfigConnector | undefined>
store() => Promise<NylasSchedulerConfigStoreType | undefined>
This method is used to get the NylasSchedulerConfigStore instance. You can use this instance to update or get the state of the store.
Returns
Type: Promise<CreateNylasSchedulerConfigStoreReturnType | undefined>
Promise<NylasSchedulerConfigStoreType | undefined>
Slots
| Slot | Description |
|---|---|
"custom-page-style-inputs" | This slot is used in “app” mode to pass a custom page style form to the nylas-page-styling component. |
"login-required" | This slot is used to display a message when the user is not logged in. |
Shadow Parts
| Part | Description |
|---|---|
"nse__close-button" | The close button of the scheduler editor. Use this part to hide the close button. |
"nse__content" | The content of the scheduler editor. Use this part to adjust the height of the editor. |
"nse__header" | The header of the scheduler editor. |
"nse__title" | The title of the scheduler editor. |
Graph
Built with StencilJS