NylasScheduling component

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

PreviewCode

import React from "react";
import { NylasScheduling } from "@nylas/react";
import Frame from "react-frame-component";

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;

Properties

bookingInfo?

Name	bookingInfo
Description	Allows the bookingInfo object to be passed 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 reference required for the cancellation flow.
Type	string

clientId?

Name	clientId
Description	The application ID associated with the public Configuration object. 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. If the configurationId is provided, this prop is ignored.
Type	string

configurationId?

Name	configurationId
Description	The Configuration ID. This should be passed in when using a public Configuration, 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	An easy way to override the default function of the event emitter. An example of this is the timeslotConfirmed event. By default, this event sets the Scheduler store state for showBookingForm to true, which shows the booking form. However, if you want to override this behavior, you can pass in the eventOverride prop: <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 Scheduler when fetching data.
Type	boolean

localization?

Name	localization
Description	Allows you 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	Used to set the mode for Scheduler. The mode can be either app (used to show the default Nylas Scheduler UI) or composable (used to show the composable Nylas Scheduler UI).
Type	app | composable
Default	app

nylasBranding?

Name	nylasBranding
Description	When false, hides the Nylas branding.
Type	boolean
Default	true

organizerConfirmationBookingRef?

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

rescheduleBookingRef?

Name	rescheduleBookingRef
Description	Booking reference 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 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 public Configuration used for 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. If the configurationId is provided, this prop is ignored.
Type	string

themeConfig?

Name	themeConfig
Description	Used to automatically generate a theme with color palette and CSS variables to customize the look and feel of the Scheduler.
Type	ThemeConfig

Events

Event	Description
bookedEventInfo	Triggered on successful booking request. Emits the event data.
bookingRefExtracted	Triggered if either the rescheduleBookingRef or cancelBookingRef or organizerConfirmationBookingRef prop is supplied and the component has been attached to the DOM. 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	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	Fired when the Scheduler Component enters componentDidLoad lifecycle.
schedulerWillLoad	Fired when the Scheduler Component enters componentWillLoad lifecycle.

CSS parts

Part	Description
additional-data-page
booked-event-page
cancel-flow-page
cancelled-event-page
confirmed-event-page
manual-confirmation-page
select-date-page

nylas-booked-event-card

Part	Description
nbec	The booked event card host.
nbec__button-outline	The cancel and reschedule button CTA.
nbec__cancel-cta	The cancel button CTA.
nbec__card	The booked event card.
nbec__description	The description of the booked event card.
nbec__reschedule-cta	The reschedule button CTA.
nbec__title	The title of the booked event card.

nylas-booking-form

Part	Description
nbf	The booking form host.
nbf__button-ghost	The ghost button.
nbf__button-outline	The outline button.
nbf__button-primary	The primary button.
nbf__checkbox-component	The checkbox component.
nbf__dropdown	The dropdown component.
nbf__dropdown-button	The dropdown button.
nbf__dropdown-content	The dropdown content.
nbf__input-textfield	The input textfield.
nbf__input-wrapper	The input wrapper.
nbf__radio-button-group	The radio button group.
nbf__textarea-component	The text area component.

nylas-cancel-booking-form

Part	Description
ncbf	The cancel booking form container.
ncbf__button-cta	The cancel booking form CTA button.
ncbf__button-outline	The cancel booking form outline button.
ncbf__card	The cancel booking form card.
ncbf__description	The description of the cancel booking form.
ncbf__icon	The calendar icon.
ncbf__reason-textarea	The reason text area.
ncbf__title	The title of the cancel booking form.

nylas-cancelled-event-card

Part	Description
ncec	The cancelled event card host.
ncec__button-outline	The close button CTA.
ncec__card	The cancelled event card.
ncec__description	The description of the cancelled event card.
ncec__icon	The calendar icon.
ncec__title	The title of the cancelled event card.

nylas-date-picker

Part	Description
ndp	The date picker host.
ndp__date	The date.
ndp__date--current-day	The current day.
ndp__date--current-month	The dates in the current month.
ndp__date--disabled	The disabled dates.
ndp__date--selected	The selected date.
ndp__day	The day.
ndp__month-button	The month button.
ndp__month-header	The month header.
ndp__title	The title.

nylas-locale-switch

Part	Description
nls	The locale switch container.
nls__language	The language select container.
nls__language-drop-button	The language dropdown button.
nls__language-drop-content	The language dropdown content.
nls__language-drop-label	The language dropdown label.
nls__language-dropdown	The language dropdown.
nls__timezone	The timezone select container.
nls__timezone-drop-button	The timezone dropdown button.
nls__timezone-drop-button-selected-label	The timezone dropdown button selected label.
nls__timezone-drop-content	The timezone dropdown content.
nls__timezone-drop-label	The timezone dropdown label.
nls__timezone-dropdown	The timezone dropdown.

namespace

Part	Description
ns_additional-data-page	The additional data page.
ns_booked-event-page	The booked event page.
ns_left-panel	The left panel.
ns_left-panel__wrapper	The left panel wrapper.
ns_reschedule	The reschedule.
ns_right-panel	The right panel.
ns_right-panel__calendar-icon	The right panel calendar icon.
ns_right-panel__selected-date	The right panel selected date.
ns_right-panel__title	The right panel title.
ns_select-date-page	The select date page.

nylas-selected-event-card

Part	Description
nsec	The selected event card component.
nsec__card	The card component.
nsec__date	The date selected.
nsec__icon	The calendar icon.
nsec__time	The time slot selected.

nylas-timeslot-picker

Part	Description
ntp	The time slot picker component.
ntp__button-primary	The time slot picker CTA.
ntp__timeslot	The time slot button.
ntp__timeslot--selected	The selected time slot button.

Code samples

BasicPublic ConfigEvent overridesEvent handlersCustom theme

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

function App() {
  return (
    <NylasScheduling
      configurationId="<CONFIGURATION_ID>"
      clientId="<NYLAS_CLIENT_ID>"
    />
  );
}

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

function App() {
  return (
    <NylasScheduling
      slug="meeting-with-john"
      clientId="<NYLAS_CLIENT_ID>"
    />
  );
}

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

function App() {
  return (
    <NylasScheduling
      configurationId="<CONFIGURATION_ID>"
      clientId="<NYLAS_CLIENT_ID>"
      eventOverrides='{
        "timeslotConfirmed": "handleTimeslotConfirmed",
        "bookedEventInfo": "handleBookingSuccess",
        "nylasSchedulerError": "handleError"
      }'
    />
  );
}

// Listen for timeslot confirmation
element.addEventListener('timeslotConfirmed', (event) => {
  const timeslot = event.detail;
  console.log('Timeslot confirmed:', timeslot);

  // Navigate to next step or show confirmation
  showEventDetails(timeslot);
});

// Listen for successful bookings
element.addEventListener('bookedEventInfo', (event) => {
  const bookingInfo = event.detail;
  console.log('Event booked:', bookingInfo);

  // Show success message or redirect
  showBookingConfirmation(bookingInfo);
});

// Listen for errors
element.addEventListener('nylasSchedulerError', (event) => {
  const error = event.detail;
  console.error('Scheduler error:', error);

  // Display error message to user
  showErrorMessage(error);
});

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

function App() {
  return (
    <NylasScheduling
      configurationId="<CONFIGURATION_ID>"
      clientId="<NYLAS_CLIENT_ID>"
      themeConfig='{
        "--nylas-primary": "#007bff",
        "--nylas-base-100": "#ffffff",
        "--nylas-border-radius": "8px"
      }'
    />
  );
}