nylas-timeslot-picker

Overview

The nylas-timeslot-picker component is a UI component that allows users to select a timeslot from a list of available timeslots.

Version1.3.6
Install (React)npm install @nylas/react
Import (React)import { NylasTimeslotPicker } from '@nylas/react';
Import (CDN)You do not need to individually import the component, just import the parent component either nylas-scheduling or nylas-scheduler-editor.

Example


Properties

PropertyAttributeDescriptionTypeDefault
hour12The 12-hour time format.boolean | undefinedundefined
selectedDateThe selected date.Date | undefinednew Date()
selectedLanguageThe selected language.string | undefinedundefined
selectedTimeslotThe selected timeslot.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; }undefined
selectedTimezoneThe selected timezone.stringIntl.DateTimeFormat().resolvedOptions().timeZone

Standalone Props

ⓘ NOTE: The following props are automatically configured when used within nylas-scheduling. Set these props manually only if you’re using the component independently.
PropertyAttributeDescriptionTypeDefault
availabilityThe available timeslots.AvailabilityTimeslot[] | undefinedundefined
isLoadingThe loading state prop. Used to display loading state when fetching availability.boolean | undefinedundefined
themeConfigThe theme configuration.anyundefined

Events

EventDescriptionType
timeslotConfirmedThis event is fired when a timeslot is confirmed. By default, this will proceed to the booking form page.CustomEvent<{ timeslot: Timeslot; host: HTMLNylasTimeslotPickerElement; }>
timeslotSelectedThis event is fired when a timeslot is selected.CustomEvent<{ start_time: Date; end_time: Date; emails?: string[] | undefined; capacity?: number | undefined; event_id?: string | undefined; master_id?: string | undefined; calendar_id?: string | undefined; }>
validateTimeslotErrorCustomEvent<{ error: string; type: "error" | "info"; }>

Methods

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

Parameters

NameTypeDescription
errorstring
type"error" | "info"

Returns

Type: Promise<void>

Slots

SlotDescription
"timeslot-picker-cta-label"The label for the timeslot picker CTA. Default is “Next”.

Shadow Parts

PartDescription
"ntp"The timeslot picker component.
"ntp__button-primary"The timeslot picker CTA.
"ntp__time-label"
"ntp__time-picker-wrapper"The timeslot picker wrapper.
"ntp__timeslot"The timeslot button.
"ntp__timeslot--selected"The selected timeslot button.
"ntp__timeslots"The timeslot picker timeslots.

Built with StencilJS