nylas-availability-picker
Overview
The nylas-availability-picker component is a form input for selecting availability (open hours).
| Version | 1.1.4 |
| Install (React) | npm install @nylas/react |
| Import (React) | import { NylasAvailabilityPicker } from '@nylas/react'; |
| Import (CDN) | <script type="module">
import { defineCustomElement } from "https://cdn.jsdelivr.net/npm/@nylas/web-elements@latest/dist/cdn/nylas-availability-picker/nylas-availability-picker.es.js";
defineCustomElement();
</script> |
Example
Properties
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.
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
defaultTimezone | The default timezone or preset timezone. | string | Intl.DateTimeFormat().resolvedOptions().timeZone | |
hideHeader | Hide the header of the availability picker. | boolean | false | |
name | The name of the availability picker. | string | 'availability' | |
openHours | The open hours to display. | OpenHours[] | undefined | undefined | |
selectedConfiguration | The selected configuration. | Configuration | undefined | undefined |
Events
| Event | Description | Type |
|---|---|---|
valueChanged | This event is fired when the selected availability / open hours change. The value is a stringified JSON object with the open hours and timezone. { openHours: OpenHours[], timezone: string } | CustomEvent<{ value: string; name: string; }> |
Shadow Parts
| Part | Description |
|---|---|
"nap" | |
"nap__add-time-range" | The add time range button |
"nap__availability" | The availability container |
"nap__day" | The day container |
"nap__header" | The header of the availability picker |
"nap__select-timezone" | The timezone selection container |
"nap__select-timezone-button" | The timezone selection button |
"nap__select-timezone-dropdown-content" | The timezone selection dropdown content |
"nap__time-picker-container" | The time picker container |
"nap__time-picker-input" | The time picker input |
"nap__time-picker-times" | The time picker times |
"nap__time-range" | The time range container |
"nap__time-ranges" | The time ranges container |
Built with StencilJS