nylas-timeslot-interval

Overview

The nylas-timeslot-interval component allows users to set their time slot interval preferences. This component provides an option to set both interval_minutes and round_to in the configuration.

Version1.3.3
Install (React)npm install @nylas/react
Import (React)import { NylasTimeslotInterval } from '@nylas/react';
Import (CDN)<script type="module"> import { defineCustomElement } from "https://cdn.jsdelivr.net/npm/@nylas/web-elements@latest/dist/cdn/nylas-timeslot-interval/nylas-timeslot-interval.es.js"; defineCustomElement(); </script>

Example


Properties

PropertyAttributeDescriptionTypeDefault
selectedLanguageThe selected language.LANGUAGE_CODE.de | LANGUAGE_CODE.en | LANGUAGE_CODE.es | LANGUAGE_CODE.fr | LANGUAGE_CODE.ja | LANGUAGE_CODE.nl | LANGUAGE_CODE.sv | LANGUAGE_CODE.zh | undefinedundefined

Standalone Props

ⓘ NOTE: The following props are automatically configured when used within nylas-scheduler-editor. Set these props manually only if you’re using the component independently.
PropertyAttributeDescriptionTypeDefault
eventDurationMinutesThe event duration in minutes.number | undefinedthis.selectedConfiguration?.availability?.duration_minutes
nameThe name of the calendar picker.string'timeslot-picker'
selectedConfigurationThe selected configConfiguration | undefinedundefined

Events

EventDescriptionType
valueChangedThis event is fired when the selected booking calendar changes.CustomEvent<{ value: string; name: string; }>

Shadow Parts

PartDescription
"nti"The timeslot interval container
"nti__dropdown"The dropdown container
"nti__dropdown-button"The dropdown button
"nti__dropdown-content"The dropdown content
"nti__header"The header of the timeslot interval picker
"nti__input-label"The input label of the timeslot interval picker

Built with StencilJS