nylas-specific-date-availability-picker
Overview
The nylas-specific-date-availability-picker component is a component for managing specific date availability overrides. This component allows users to set custom availability for specific dates that override the regular open hours.
| Version | 2.0.4 |
| Install (React) | npm install @nylas/react |
| Import (React) | import { NylasSpecificDateAvailabilityPicker } 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
Features
- Dynamic Date Management: Add and remove specific date entries
- Availability Toggle: Toggle between available hours and “entire day unavailable”
- Auto-incrementing Dates: New entries automatically initialize with incremental dates
- Empty State: User-friendly empty state when no dates are configured
- Form Validation: Comprehensive validation for dates and time ranges
- Internationalization: Full i18n support with localized error messages
Validation
The component includes comprehensive validation:
- Date validation: Ensures dates are provided and in valid format
- Time range validation: Validates that start time is before end time (for available slots)
- Real-time validation: Errors are displayed immediately and cleared when corrected
- Form integration: Uses browser form validation APIs for integration with forms
Error messages are localized and include:
- Date is required
- Invalid date format
- Start and end times are required
- Start time must be before end time
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 |
|---|---|---|---|---|
name | The name of the specific date availability picker. | string | 'specific-date-availability' | |
selectedConfiguration | The selected configuration. | Configuration | undefined | undefined | |
selectedLanguage | The selected language. | LANGUAGE_CODE.de | LANGUAGE_CODE.en | LANGUAGE_CODE.es | LANGUAGE_CODE.fr | LANGUAGE_CODE.ja | LANGUAGE_CODE.ko | LANGUAGE_CODE.nl | LANGUAGE_CODE.sv | LANGUAGE_CODE.zh | undefined | undefined | |
specificDateOpenHours | The specific date open hours. | SpecificDateOpenHours[] | undefined | undefined |
Events
| Event | Description | Type |
|---|---|---|
valueChanged | The event is fired when the specific date open hours change. | CustomEvent<{ value: string; name: string; }> |
Shadow Parts
| Part | Description |
|---|---|
"nsdap" | |
"nsdap__add-button" | |
"nsdap__add-button-container" | |
"nsdap__content" | |
"nsdap__date-input" | |
"nsdap__date-input-container" | |
"nsdap__empty-icon" | |
"nsdap__empty-state" | |
"nsdap__empty-subtitle" | |
"nsdap__empty-title" | |
"nsdap__error-message" | |
"nsdap__header" | |
"nsdap__header-description" | |
"nsdap__remove-button" | |
"nsdap__specific-date-entry" | |
"nsdap__specific-dates" | |
"nsdap__time-pickers" | |
"nsdap__toggle-button" | |
"nsdap__unavailable-text" |
Built with StencilJS