Scheduling Components
nylas-scheduling
Overview
The nylas-scheduling component is used to display the Nylas Scheduling UI.
| Version | 1.3.3 |
| Install (React) | npm install @nylas/react |
| Import (React) | import { NylasScheduling } from '@nylas/react'; |
| Import (CDN) | <script type="module">
import { defineCustomElement } from "https://cdn.jsdelivr.net/npm/@nylas/web-elements@latest/dist/cdn/nylas-scheduling/nylas-scheduling.es.js";
defineCustomElement();
</script> |
Example
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
bookingInfo | This enables passing the bookingInfo object to the Scheduler UI for direct booking event creation. When used with timeslotConfirmedHandler, it bypasses the additional data page and immediately invokes the handler after booking. | undefined | { primaryParticipant: NylasSchedulerBookingParticipant; startTime?: Date | undefined; endTime?: Date | undefined; timezone?: string | undefined; guests?: NylasSchedulerBookingParticipant[] | undefined; additionalFields?: Record<string, { value: string; type: string; }> | undefined; } | undefined | |
cancelBookingRef | Booking Ref required for cancelling flow. | string | undefined | undefined | |
clientId | The app ID of the configuration (public config) to be used for the Nylas Scheduler. This is used in conjunction with the slug. When the configurationId is not provided, the slug and clientId are used to make requests to the Scheduler API endpoints. If the configurationId is provided, this prop will be ignored. | string | undefined | undefined | |
configurationId | The config ID for the Nylas Scheduler. This should be passed in when using a public config, in which case the sessionId is not required. | string | undefined | undefined | |
defaultSchedulerState | The default scheduler store state. Used to set the initial state of the scheduler store. | undefined | { selectedDate?: Date | null | undefined; selectedLanguage?: string | undefined; selectedTimezone?: string | undefined; selectedTimeslot?: Timeslot | null | undefined; availabilityOrderEmails?: string[] | undefined; showBookingForm?: boolean | undefined; selectableDates?: Date[] | null | undefined; eventDuration?: number | undefined; availability?: AvailabilityTimeslot[] | undefined; state?: DataState | undefined; eventInfo?: NylasEvent | null | undefined; cancelledEventInfo?: Partial<NylasEvent> | null | undefined; reschedulingEventInfo?: NylasEvent | undefined; confirmedEventInfo?: NylasEvent | undefined; bookingInfo?: NylasSchedulerBookingData | undefined; rescheduleBookingId?: string | undefined; cancelBookingId?: string | undefined; isLoading?: boolean | undefined; nylasBranding?: boolean | undefined; configSettings?: ConfigSettings | undefined; organizerConfirmationBookingId?: string | undefined; rejectBookingId?: string | undefined; organizerConfirmationSalt?: string | undefined; themeConfig?: Partial<{ '--nylas-primary': string; '--nylas-info': string; '--nylas-success': string; '--nylas-warning': string; '--nylas-error': string; '--nylas-error-pressed': string; '--nylas-base-0': string; '--nylas-base-25': string; '--nylas-base-50': string; '--nylas-base-100': string; '--nylas-base-200': string; '--nylas-base-300': string; '--nylas-base-400': string; '--nylas-base-500': string; '--nylas-base-600': string; '--nylas-base-700': string; '--nylas-base-800': string; '--nylas-base-900': string; '--nylas-base-950': string; '--nylas-font-family': string; '--nylas-font-size': string; '--nylas-border-radius': string; '--nylas-border-radius-2x': string; '--nylas-border-radius-3x': string; }> | undefined; } | undefined | |
enableUserFeedback | boolean | undefined | true | ||
eventOverrides | This provides an easy way to override the default function of the event emitter. An example of this is the timeslotConfirmed event. By default, this event will set the scheduler store state for showBookingForm to true which will show the booking form. However, if you want to override this behavior, you can pass in the prop eventOverride like: html <nylas-scheduling eventOverride={{"timeslotConfirmed": (event, nylasConnector) => { console.log("Timeslot confirmed event fired!"); } }} /> | Partial<{ themeConfig: (event: CustomEvent<unknown>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; timeslotSelected: (event: CustomEvent<Timeslot>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; timeslotConfirmed: (event: CustomEvent<Timeslot>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; dateSelected: (event: CustomEvent<Date>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; monthChanged: (event: CustomEvent<Date>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; timezoneChanged: (event: CustomEvent<string>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; languageChanged: (event: CustomEvent<string>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; nameChanged: (event: CustomEvent<string>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; emailChanged: (event: CustomEvent<string>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; backButtonClicked: (event: CustomEvent<boolean>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; detailsConfirmed: (event: CustomEvent<NylasSchedulerBookingDataWithFlatFields>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; bookingFormError: (event: CustomEvent<Partial<Notification>>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; bookingFormSubmitted: (event: CustomEvent<void>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; bookingInfo: (event: CustomEvent<unknown>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; configSettings: (event: CustomEvent<unknown>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; cancelBookingButtonClicked: (event: CustomEvent<{ bookingId: string; }>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; rescheduleButtonClicked: (event: CustomEvent<{ bookingId: string; errorHandler?: ((error: NylasSchedulerErrorResponse) => void) | undefined; }>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; rescheduleBookedEventError: (event: CustomEvent<NylasSchedulerErrorResponse>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; cancelBookedEventValidationError: (event: CustomEvent<{ error: { title: string; message: string; }; }>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; goBackButtonClicked: (event: CustomEvent<void>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; cancelBookingFormSubmitted: (event: CustomEvent<{ bookingId: string; action: "cancel" | "reject"; reason: string; errorHandler?: ((error: NylasSchedulerErrorResponse) => void) | undefined; }>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; triggerValidation: (event: CustomEvent<{}>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; cancelBookedEventError: (event: CustomEvent<NylasSchedulerErrorResponse>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; cancelBookingFormError: (event: CustomEvent<Partial<Notification>>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; closeCancelEventCardClicked: (event: CustomEvent<{ errorHandler?: ((error: NylasSchedulerErrorResponse) => void) | undefined; }>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; cancelledEventCardError: (event: CustomEvent<NylasSchedulerErrorResponse>, connector?: NylasSchedulerConnectorInterface | undefined) => Promise<void>; }> & EventOverride<NylasSchedulerConnectorInterface> | {} | |
isLoading | The loading state. This is used to set the loading state for the Nylas Scheduler when fetching data. | boolean | undefined | undefined | |
localization | This prop will allow to override the default localization strings for each language. Nylas scheduling page currently support the following language codes: en, es, fr, de, sv, zh, ja, nl. | undefined | { en?: Locale | undefined; es?: Locale | undefined; fr?: Locale | undefined; de?: Locale | undefined; sv?: Locale | undefined; zh?: Locale | undefined; ja?: Locale | undefined; nl?: Locale | undefined; } | undefined | |
mode | This is used to set the mode for the Nylas Scheduler. The mode can be either app or composable. The default mode is app. - app: This mode is used to show the default Nylas Scheduler UI. - composable: This mode is used to show the composable Nylas Scheduler UI by passing the individual scheduler components as children. | "app" | "composable" | 'app' | |
nylasBranding | This prop lets you hide the Nylas branding. Default is true. | boolean | undefined | true | |
organizerConfirmationBookingRef | Booking Ref required for the manual confirmation flow. | string | undefined | undefined | |
rescheduleBookingRef | Booking Ref required for rescheduling flow. | string | undefined | undefined | |
schedulerApiUrl | The URL for the Nylas Scheduler API. (staging or production URL) | string | 'https://api.us.nylas.com' | |
sessionId | The session ID for the Nylas Scheduler. This is used to authenticate the user. | string | undefined | undefined | |
showNotification | boolean | undefined | true | ||
slug | The slug of the configuration (public config) to be used for the Nylas Scheduler. This is used in conjunction with the clientId. When the configurationId is not provided, the slug and clientId are used to make requests to the Scheduler API endpoints. If the configurationId is provided, this prop will be ignored. | string | undefined | undefined | |
themeConfig | Theme config, used to automatically generate a theme with color palette and CSS variables to customize the look and feel of the Nylas Scheduler. | 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-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; } | undefined |
Events
| Event | Description | Type |
|---|---|---|
bookedEventInfo | This event is triggered on successful booking request. It emits the event data. | CustomEvent<NylasSchedulerErrorResponse | NylasSuccessResponse<NylasEvent>> |
bookingRefExtracted | This event is triggered if either the rescheduleBookingRef or cancelBookingRef or organizerConfirmationBookingRef prop is supplied and the component has been attached to the DOM. It emits the configurationId and bookingId derived from the rescheduleBookingRef or cancelBookingRef or organizerConfirmationBookingRef. Subscribe to this event to obtain the extracted configurationId, which is necessary to generate the sessionID for configurations that are not public. | CustomEvent<{ configurationId: string; bookingId: string; salt?: string | undefined; }> |
configSettingsLoaded | CustomEvent<{ settings: NylasSchedulerResponse<UISettingsResponse>; }> | |
init | This event is fired when the provider is initialized. It can be used to set the initial state of the provider, or to prevent the provider from firing some default behavior. | CustomEvent<HTMLNylasSchedulingElement> |
nylasSchedulerError | CustomEvent<{ notification: Notification; host: HTMLElement; }> | |
schedulerDidLoad | This event is fired when the scheduler component enters componentDidLoad lifecycle. | CustomEvent<HTMLNylasSchedulingElement> |
schedulerWillLoad | This event is fired when the scheduler component enters componentWillLoad lifecycle. | CustomEvent<HTMLNylasSchedulingElement> |
Methods
getNylasSchedulerConnector() => Promise<NylasSchedulerConnector | undefined>
This method is used to retrieve the NylasConnector instance
Returns
Type: Promise<NylasSchedulerConnector | undefined>
The NylasConnector instance
getNylasSchedulerStore() => Promise<NylasSchedulerStoreType | undefined>
This method is used to retrieve the NylasScheduler instance
Returns
Type: Promise<ObservableMap<NylasSchedulerStoreState> | undefined>
The NylasScheduler instance
getRef() => Promise<HTMLNylasSchedulingElement>
Returns
Type: Promise<HTMLNylasSchedulingElement>
Shadow Parts
| Part | Description |
|---|---|
"additional-data-page" | |
"booked-event-page" | |
"cancel-flow-page" | |
"cancelled-event-page" | |
"confirmed-event-page" | |
"manual-confirmation-page" | |
"nbec" | [nylas-booked-event-card] The booked event card host. |
"nbec__button-outline" | [nylas-booked-event-card] The cancel & reschedule button CTA. |
"nbec__cancel-cta" | [nylas-booked-event-card] The cancel button CTA. |
"nbec__card" | [nylas-booked-event-card] The booked event card. |
"nbec__description" | [nylas-booked-event-card] The description of the booked event card. |
"nbec__reschedule-cta" | [nylas-booked-event-card] The reschedule button CTA. |
"nbec__title" | [nylas-booked-event-card] The title of the booked event card. |
"nbf" | [nylas-booking-form] The booking form host. |
"nbf__button-ghost" | [nylas-booking-form] The ghost button. |
"nbf__button-outline" | [nylas-booking-form] The outline button. |
"nbf__button-primary" | [nylas-booking-form] The primary button. |
"nbf__checkbox-component" | [nylas-booking-form] The checkbox component. |
"nbf__dropdown" | [nylas-booking-form] The dropdown component. |
"nbf__dropdown-button" | [nylas-booking-form] The dropdown button. |
"nbf__dropdown-content" | [nylas-booking-form] The dropdown content. |
"nbf__input-textfield" | [nylas-booking-form] The input textfield. |
"nbf__input-wrapper" | [nylas-booking-form] The input wrapper. |
"nbf__radio-button-group" | [nylas-booking-form] The radio button group. |
"nbf__textarea-component" | [nylas-booking-form] The textarea component. |
"ncbf" | [nylas-cancel-booking-form] The cancel booking form container. |
"ncbf__button-cta" | [nylas-cancel-booking-form] The cancel booking form CTA button. |
"ncbf__button-outline" | [nylas-cancel-booking-form] The cancel booking form outline button. |
"ncbf__card" | [nylas-cancel-booking-form] The cancel booking form card. |
"ncbf__description" | [nylas-cancel-booking-form] The description of the cancel booking form. |
"ncbf__icon" | [nylas-cancel-booking-form] The calendar icon. |
"ncbf__reason-textarea" | [nylas-cancel-booking-form] The reason textarea. |
"ncbf__title" | [nylas-cancel-booking-form] The title of the cancel booking form. |
"ncec" | [nylas-cancelled-event-card] The cancelled event card host. |
"ncec__button-outline" | [nylas-cancelled-event-card] The close button CTA. |
"ncec__card" | [nylas-cancelled-event-card] The cancelled event card. |
"ncec__description" | [nylas-cancelled-event-card] The description of the cancelled event card. |
"ncec__icon" | [nylas-cancelled-event-card] The calendar icon. |
"ncec__title" | [nylas-cancelled-event-card] The title of the cancelled event card. |
"ndp" | [nylas-date-picker] The date picker host. |
"ndp__date" | [nylas-date-picker] The date. |
"ndp__date--current-day" | [nylas-date-picker] The current day. |
"ndp__date--current-month" | [nylas-date-picker] The dates in the current month. |
"ndp__date--disabled" | [nylas-date-picker] The disabled dates. |
"ndp__date--selected" | [nylas-date-picker] The selected date. |
"ndp__day" | [nylas-date-picker] The day. |
"ndp__month-button" | [nylas-date-picker] The month button. |
"ndp__month-header" | [nylas-date-picker] The month header. |
"ndp__title" | [nylas-date-picker] The title. |
"nls" | [nylas-locale-switch] The locale switch container. |
"nls__language" | [nylas-locale-switch] The language select container |
"nls__language-drop-button" | [nylas-locale-switch] The language dropdown button |
"nls__language-drop-content" | [nylas-locale-switch] The language dropdown content |
"nls__language-drop-label" | [nylas-locale-switch] The language dropdown label |
"nls__language-dropdown" | [nylas-locale-switch] The language dropdown |
"nls__timezone" | [nylas-locale-switch] The timezone select container |
"nls__timezone-drop-button" | [nylas-locale-switch] The timezone dropdown button |
"nls__timezone-drop-button-selected-label" | [nylas-locale-switch] The timezone dropdown button selected label |
"nls__timezone-drop-content" | [nylas-locale-switch] The timezone dropdown content |
"nls__timezone-drop-label" | [nylas-locale-switch] The timezone dropdown label |
"nls__timezone-dropdown" | [nylas-locale-switch] The timezone dropdown |
"nsec" | [nylas-selected-event-card] The selected event card component. |
"nsec__card" | [nylas-selected-event-card] The card component. |
"nsec__date" | [nylas-selected-event-card] The date selected. |
"nsec__icon" | [nylas-selected-event-card] The calendar icon. |
"nsec__time" | [nylas-selected-event-card] The timeslot selected. |
"ntp" | [nylas-timeslot-picker] The timeslot picker component. |
"ntp__button-primary" | [nylas-timeslot-picker] The timeslot picker CTA. |
"ntp__timeslot" | [nylas-timeslot-picker] The timeslot button. |
"ntp__timeslot--selected" | [nylas-timeslot-picker] The selected timeslot button. |
"select-date-page" |
Graph
Built with StencilJS