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.

Version	`1.4.3`
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

Property	Description	Type	Default
`hour12`	The 12-hour time format.	`boolean \| undefined`	`undefined`
`selectedDate`	The selected date.	`Date \| undefined`	`new Date()`
`selectedLanguage`	The selected language.	`string \| undefined`	`undefined`
`selectedTimeslot`	The 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`
`selectedTimezone`	The selected timezone.	`string`	`Intl.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.

Property	Description	Type	Default
`availability`	The available timeslots.	`AvailabilityTimeslot[] \| undefined`	`undefined`
`isLoading`	The loading state prop. Used to display loading state when fetching availability.	`boolean \| undefined`	`undefined`
`themeConfig`	The theme configuration.	`any`	`undefined`

Events

Event	Description	Type
`timeslotConfirmed`	This event is fired when a timeslot is confirmed. By default, this will proceed to the booking form page.	`CustomEvent<{ timeslot: Timeslot; host: HTMLNylasTimeslotPickerElement; }>`
`timeslotSelected`	This 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; }>`
`validateTimeslotError`		`CustomEvent<{ error: string; type: "error" \| "info"; }>`

Methods

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

Parameters

Name	Type	Description
`error`	`string`
`type`	`"error" \| "info"`

Returns

Type: Promise<void>

Slots

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

Shadow Parts

Part	Description
`"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