nylas-timeslot-picker

The nylas-timeslot-picker element allows users to select a time slot from a list of available time slots.

PreviewCode

import { NylasTimeslotPicker } from "@nylas/react";

export const NylasTimeslotPickerExample: React.FC = () => {
const date = new Date(2021, 7, 1);

return (
<div className="inline-block border border-dashed border-gray-300 min-w-[300px] rounded-md">
  <NylasTimeslotPicker
    selectedDate={date}
    availability={[
      {
        start_time: new Date(2021, 7, 1, 9, 0),
        end_time: new Date(2021, 7, 1, 10, 0),
        emails: [],
      },
      {
        start_time: new Date(2021, 7, 1, 10, 0),
        end_time: new Date(2021, 7, 1, 11, 0),
        emails: [],
      },
      {
        start_time: new Date(2021, 7, 1, 11, 0),
        end_time: new Date(2021, 7, 1, 12, 0),
        emails: [],
      },
      {
        start_time: new Date(2021, 7, 1, 12, 0),
        end_time: new Date(2021, 7, 1, 13, 0),
        emails: [],
      },
      {
        start_time: new Date(2021, 7, 1, 13, 0),
        end_time: new Date(2021, 7, 1, 14, 0),
        emails: [],
      },
      {
        start_time: new Date(2021, 7, 1, 14, 0),
        end_time: new Date(2021, 7, 1, 15, 0),
        emails: [],
      },
    ]}
  />
</div>
);
};

export default NylasTimeslotPickerExample;

Properties

hour12?

Name	hour12
Description	The 12-hour time format.
Type	boolean | undefined

selectedDate?

Name	selectedDate
Description	The selected date.
Type	Date | undefined

selectedLanguage?

Name	selectedLanguage
Description	The selected language.
Type	LANGUAGE_CODE.de | LANGUAGE_CODE.en | LANGUAGE_CODE.es | LANGUAGE_CODE.fr | LANGUAGE_CODE.ja | LANGUAGE_CODE.ko | LANGUAGE_CODE.nl | LANGUAGE_CODE.sv | LANGUAGE_CODE.zh | undefined

selectedTimeslot?

Name	selectedTimeslot
Description	The selected time slot.
Type	undefined | { start_time: Date; end_time: Date; emails?: string[] | undefined; capacity?: number | undefined; event_id?: string | undefined; master_id?: string | undefined; calendar_id?: string | undefined; }

selectedTimezone?

Name	selectedTimezone
Description	The selected time zone.
Type	string

Standalone properties

The following props are automatically configured when used within NylasScheduling. Set these props manually only if you’re using the component independently.

availability?

Name	availability
Description	The available time slots.
Type	AvailabilityTimeslot[] | undefined

isLoading?

Name	isLoading
Description	The loading state prop. Used to display loading state when fetching availability.
Type	boolean | undefined

themeConfig?

Name	themeConfig
Description	The theme configuration.
Type	any

Events

Event	Description
timeslotConfirmed	Fired when a time slot is confirmed. By default, this will proceed to the booking form page.
timeslotSelected	Fired when a time slot is selected.
validateTimeslotError

Methods

Method	Parameters	Type returned
emitValidateTimeslotError(error: string, type: 'error' | 'info') => Promise<void>	error (string) type (error | info)	Promise<void>

Slots

Slot	Description
timeslot-picker-cta-label	The label for the time slot picker CTA. Default is “Next”.

CSS parts

Part	Description
ntp	The time slot picker component.
ntp__button-primary	The time slot picker CTA.
ntp__time-label
ntp__time-picker-wrapper	The time slot picker wrapper.
ntp__timeslot	The time slot button.
ntp__timeslot--selected	The selected time slot button.
ntp__timeslots	The time slot picker time slots.

Code samples

The nylas-timeslot-picker element is automatically included in the main NylasScheduling component. The following code samples show how to use the element on its own.

StandaloneEvent handlersCustom theme

<nylas-timeslot-picker
  availability='[
    {
      "start_time": "2024-01-15T10:00:00Z",
      "end_time": "2024-01-15T11:00:00Z",
      "available": true
    },
    {
      "start_time": "2024-01-15T11:00:00Z",
      "end_time": "2024-01-15T12:00:00Z",
      "available": true
    }
  ]'
  selected-date="2024-01-15T00:00:00Z"
  selected-timezone="America/New_York"
  on-timeslot-selected="handleTimeslotSelected"
  on-timeslot-confirmed="handleTimeslotConfirmed"
></nylas-timeslot-picker>

// Listen for timeslot selection
element.addEventListener("timeslotSelected", (event) => {
  console.log("Timeslot selected:", event.detail);
});

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

// Listen for validation errors
element.addEventListener("validateTimeslotError", (event) => {
  console.log("Validation error:", event.detail);
});

<nylas-timeslot-picker
  availability="..."
  selected-date="2024-01-15T00:00:00Z"
  theme-config='{
    "--nylas-primary": "#007bff",
    "--nylas-base-100": "#ffffff",
    "--nylas-border-radius": "8px"
  }'
></nylas-timeslot-picker>