nylas-date-picker
Overview
The nylas-date-picker component is a UI component that allows users to select a date.
| Version | 1.1.4 |
| Install (React) | npm install @nylas/react |
| Import (React) | import { NylasDatePicker } from '@nylas/react'; |
| Import (CDN) | <script type="module">
import { defineCustomElement } from "https://cdn.jsdelivr.net/npm/@nylas/web-elements@latest/dist/cdn/nylas-date-picker/nylas-date-picker.es.js";
defineCustomElement();
</script> |
Example
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
eventDuration | The event duration. | number | undefined | undefined | |
isLoading | The loading state. | boolean | undefined | undefined | |
selectedDate | The selected date. | Date | undefined | undefined | |
selectedLanguage | The selected language. | string | undefined | undefined |
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 | Attribute | Description | Type | Default |
|---|---|---|---|---|
configSettings | The config settings. | undefined | { configuration_id: string; scheduler: { available_days_in_future: number; min_cancellation_notice: number; min_booking_notice: number; rescheduling_url?: string | undefined; cancellation_url?: string | undefined; cancellation_policy?: string | undefined; hide_additional_guests?: boolean | undefined; hide_cancellation_options?: boolean | undefined; hide_rescheduling_options?: boolean | undefined; additional_fields?: Record<string, AdditionalFields> | undefined; confirmation_redirect_url?: string | undefined; organizer_confirmation_url?: string | undefined; }; organizer: { name: string; email: string; }; slug: string; appearance: Appearance; booking_type: string; name: string; } | undefined | |
selectableDates | The dates that are selectable. | Date[] | undefined | undefined |
Events
| Event | Description | Type |
|---|---|---|
dateSelected | This event is fired when a date is selected. | CustomEvent<Date> |
monthChanged | This event is fired when the month is changed. | CustomEvent<Date> |
Shadow Parts
| Part | Description |
|---|---|
"ndp" | The date picker host. |
"ndp__date" | The date. |
"ndp__date--current-day" | The current day. |
"ndp__date--current-month" | The dates in the current month. |
"ndp__date--disabled" | The disabled dates. |
"ndp__date--selected" | The selected date. |
"ndp__day" | The day. |
"ndp__month-button" | The month button. |
"ndp__month-header" | The month header. |
"ndp__title" | The title. |
Built with StencilJS