nylas-scheduling

Overview

The nylas-scheduling component is used to display the Nylas Scheduling UI.

Version	`1.1.0-canary.14`
Install (React)	`npm install @nylas/react`
Import (React)	`import { NylasScheduling } from '@nylas/react';`

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?: { [key: string]: any; } \| undefined; }`	`undefined`
`cancelBookingRef`	`cancel-booking-ref`	Booking Ref required for cancelling flow.	`string \| undefined`	`undefined`
`configurationId`	`configuration-id`	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; 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; bookingInfo?: NylasSchedulerBookingData \| undefined; rescheduleBookingId?: string \| undefined; cancelBookingId?: string \| undefined; isLoading?: boolean \| undefined; nylasBranding?: boolean \| undefined; configSettings?: ConfigSettings \| undefined; }	`undefined`
`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<{ 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>; bookingInfo: (event: CustomEvent<unknown>, 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<NylasSchedulerBookingData>, connector?: NylasSchedulerConnectorInterface \| undefined) => Promise<void>; bookingFormError: (event: CustomEvent<Partial<Notification>>, connector?: NylasSchedulerConnectorInterface \| undefined) => Promise<void>; bookingFormSubmitted: (event: CustomEvent<void>, 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>; }> & EventOverride<NylasSchedulerConnectorInterface>	`{}`
`isLoading`	`is-loading`	The loading state. This is used to set the loading state for the Nylas Scheduler when fetching data.	`boolean \| undefined`	`undefined`
`mode`	`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`	`nylas-branding`	This prop lets you hide the Nylas branding. Default is true.	`boolean \| undefined`	`true`
`rescheduleBookingRef`	`reschedule-booking-ref`	Booking Ref required for rescheduling flow.	`string \| undefined`	`undefined`
`schedulerApiUrl`	`scheduler-api-url`	The URL for the Nylas Scheduler API. (staging or production URL)	`string`	`'https://api.us.nylas.com'`
`sessionId`	`session-id`	The session ID for the Nylas Scheduler. This is used to authenticate the user.	`string \| undefined`	`undefined`
`showNotification`	`show-notification`		`boolean \| undefined`	`true`
`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
`bookingRefExtracted`	This event is triggered if either the rescheduleBookingRef or cancelBookingRef prop is supplied and the component has been attached to the DOM. It emits the configurationId and bookingId derived from the rescheduleBookingRef or cancelBookingRef. 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; }>`
`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<{ id: string; type: NotificationType; title: string; code?: number \| undefined; category: string; description?: string \| undefined; ttl?: number \| "none" \| undefined; }>`
`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>

Slots

Slot	Description
`"custom-booking-form"`	This slot is used to pass a custom booking form to the Nylas Scheduling component.
`"timeslot-picker-cta-label"`	This slot is used to pass a custom label to the timeslot picker CTA. The default label is “Next”.

Shadow Parts

Part	Description
`"additional-data-page"`
`"booked-event-page"`
`"cancel-flow-page"`
`"cancelled-event-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 for adding guests.
`"nbf__button-outline"`	[nylas-booking-form] The outline button for canceling.
`"nbf__button-primary"`	[nylas-booking-form] The primary button for booking.
`"nbf__input-label"`	[nylas-booking-form] The input label.
`"nbf__input-textfield"`	[nylas-booking-form] The input textfield.
`"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--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.
`"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