Scheduling component

The NylasScheduling component displays a scheduling widget that allows users to schedule meetings with Nylas.

Using the NylasScheduling component

import React from "react";
import { NylasScheduling } from "@nylas/react";

function App() {
  return (
    <NylasScheduling
      configurationId="ac50259a-c367-4a40-a97e-5137b47e0959"
      mode="app"
      nylasBranding={true}
      defaultSchedulerState={{
        showBookingForm: true,
        selectedTimeslot: {
          start_time: new Date(Date.now() + 24 * 60 * 60000), // 24 hours from now
          end_time: new Date(Date.now() + 24 * 60 * 60000 + 30 * 60000) // 24 hours + 30 minutes from now
        }
      }}
      eventOverrides={{
        timeslotConfirmed: async (event, connector) => {
          console.log("Timeslot confirmed:", event.detail);
          return Promise.resolve();
        },
        bookedEventInfo: async (event) => {
          console.log("Event booked:", event.detail);
          return Promise.resolve();
        },
        nylasSchedulerError: async (event) => {
          console.error("Scheduler error:", event.detail);
          return Promise.resolve();
        }
      }}
    />
  );
}

export default App;

NylasScheduling Properties

bookingInfo?

Name	bookingInfo
Description	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.
Type	NylasSchedulerBookingData

cancelBookingRef?

Name	cancelBookingRef
Description	Booking Ref required for cancelling flow.
Type	string

clientId?

Name	clientId
Description	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.
Type	string

configurationId?

Name	configurationId
Description	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.
Type	string

defaultSchedulerState?

Name	defaultSchedulerState
Description	The default scheduler store state. Used to set the initial state of the scheduler store.
Type	Partial<NylasSchedulerStoreState>

enableUserFeedback?

Name	enableUserFeedback
Type	boolean
default	true

eventOverrides?

Name	eventOverrides
Description	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!”); } }} /> ```
Type	SchedulerEventOverride
default	{}

hour12?

Name	hour12
Type	boolean | undefined

isLoading?

Name	isLoading
Description	The loading state. This is used to set the loading state for the Nylas Scheduler when fetching data.
Type	boolean

localization?

Name	localization
Description	This prop will allow to override the default localization strings for each language. Nylas scheduling pages currently support the following language codes: en, es, fr, de, sv, zh, ja, nl.
Type	Partial<Record<LANGUAGE_CODE, Locale>>

mode?

Name	mode
Description	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.
Type	’app’ | ‘composable’
default	’app’

nylasBranding?

Name	nylasBranding
Description	This prop lets you hide the Nylas branding. Default is true.
Type	boolean
default	true

organizerConfirmationBookingRef?

Name	organizerConfirmationBookingRef
Description	Booking Ref required for the manual confirmation flow.
Type	string

rescheduleBookingRef?

Name	rescheduleBookingRef
Description	Booking Ref required for rescheduling flow.
Type	string

schedulerApiUrl?

Name	schedulerApiUrl
Description	The URL for the Nylas Scheduler API. (staging or production URL)
Type	string
default	’https://api.us.nylas.com'

sessionId?

Name	sessionId
Description	The session ID for the Nylas Scheduler. This is used to authenticate the user.
Type	string

showNotification?

Name	showNotification
Type	boolean
default	true

slug?

Name	slug
Description	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.
Type	string

themeConfig?

Name	themeConfig
Description	Theme config, used to automatically generate a theme with color palette and CSS variables to customize the look and feel of the Nylas Scheduler.
Type	ThemeConfig

NylasScheduling Slots

NylasScheduling Events

Event	Description
bookedEventInfo	This event is triggered on successful booking request. It emits the event data.
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.
configSettingsLoaded
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.
nylasSchedulerError
nylasSchedulerInfo
schedulerDidLoad	This event is fired when the scheduler component enters componentDidLoad lifecycle.
schedulerWillLoad	This event is fired when the scheduler component enters componentWillLoad lifecycle.

NylasScheduling CSS 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
ns_additional-data-page	The additional data page (namespace).
ns_booked-event-page	The booked event page (namespace).
ns_left-panel	The left panel (namespace).
ns_left-panel__wrapper	The left panel wrapper (namespace).
ns_reschedule	The reschedule (namespace).
ns_right-panel	The right panel (namespace).
ns_right-panel__calendar-icon	The right panel calendar icon (namespace).
ns_right-panel__selected-date	The right panel selected date (namespace).
ns_right-panel__title	The right panel title (namespace).
ns_select-date-page	The select date page (namespace).
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