nylas-specific-date-availability-picker

The nylas-specific-date-availability-picker element manages specific date availability overrides. This element allows users to set custom availability for specific dates that override the regular open hours.

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 element 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

Standalone properties

The following props are automatically configured when used within NylasSchedulerEditor. Set these props manually only if you’re using the component independently.

`name?`


Name	`name`
Description	The name of the specific date availability picker.
Type	string
Default	`'specific-date-availability'`

`selectedConfiguration?`


Name	`selectedConfiguration`
Description	The selected Configuration.
Type	`Configuration \| undefined`

`selectedLanguage?`


Name	`selectedLanguage`
Description	The selected language.
Type	`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`

`specificDateOpenHours?`


Name	`specificDateOpenHours`
Description	The specific date open hours.
Type	`SpecificDateOpenHours[] \| undefined`

`themeConfig?`


Name	`themeConfig`
Description	The theme configuration.
Type	`undefined \| { '--nylas-primary'?: string \| undefined; '--nylas-info'?: string \| undefined;` `'--nylas-success'?: string \| undefined; '--nylas-warning'?: string \| undefined;` `'--nylas-error'?: string \| undefined; '--nylas-error-pressed'?: string \| undefined;` `'--nylas-base-0'?: string \| undefined; '--nylas-base-25'?: string \| undefined;` `'--nylas-base-50'?: string \| undefined; '--nylas-base-100'?: string \| undefined;` `'--nylas-base-200'?: string \| undefined; '--nylas-base-300'?: string \| undefined;` `'--nylas-base-400'?: string \| undefined; '--nylas-base-500'?: string \| undefined;` `'--nylas-base-600'?: string \| undefined; '--nylas-base-700'?: string \| undefined;` `'--nylas-base-800'?: string \| undefined; '--nylas-base-900'?: string \| undefined;` `'--nylas-base-950'?: string \| undefined; '--nylas-color-blue-50'?: string \| undefined;` `'--nylas-color-blue-100'?: string \| undefined; '--nylas-color-blue-300'?: string \| undefined;` `'--nylas-color-blue-500'?: string \| undefined; '--nylas-color-blue-700'?: string \| undefined;` `'--nylas-color-blue-900'?: string \| undefined; '--nylas-color-red-50'?: string \| undefined;` `'--nylas-color-red-100'?: string \| undefined; '--nylas-color-red-300'?: string \| undefined;` `'--nylas-color-red-500'?: string \| undefined; '--nylas-color-red-700'?: string \| undefined;` `'--nylas-color-red-900'?: string \| undefined; '--nylas-color-green-50'?: string \| undefined;` `'--nylas-color-green-100'?: string \| undefined; '--nylas-color-green-300'?: string \|` `undefined;'--nylas-color-green-500'?: string \| undefined; '--nylas-color-green-700'?: string \|` `undefined; '--nylas-color-green-900'?: string \| undefined; '--nylas-color-yellow-50'?: string` `\| undefined; '--nylas-color-yellow-100'?: string \| undefined; '--nylas-color-yellow-300'?:` `string \| undefined; '--nylas-color-yellow-500'?: string \| undefined;` `'--nylas-color-yellow-700'?: string \| undefined; '--nylas-color-yellow-900'?: string` `\| undefined; '--nylas-color-purple-50'?: string \| undefined; '--nylas-color-purple-100'?:` `string \| undefined; '--nylas-color-purple-300'?: string \| undefined;` `'--nylas-color-purple-500'?: string \| undefined; '--nylas-color-purple-700'?: string \|` `undefined; '--nylas-color-purple-900'?: string \| undefined; '--nylas-color-sky-50'?: string \|` `undefined; '--nylas-color-sky-100'?: string \| undefined; '--nylas-color-sky-300'?: string \|` `undefined; '--nylas-color-sky-500'?: string \| undefined; '--nylas-color-sky-700'?: string \|` `undefined; '--nylas-color-sky-900'?: string \| undefined; '--nylas-color-black'?: string \|` `undefined; '--nylas-color-grey-900'?: string \| undefined; '--nylas-color-grey-800'?: string \|` `undefined; '--nylas-color-grey-700'?: string \| undefined; '--nylas-color-grey-600'?: string \|` `undefined; '--nylas-color-grey-500'?: string \| undefined; '--nylas-color-grey-400'?: string \|` `undefined; '--nylas-color-grey-300'?: string \| undefined; '--nylas-color-grey-200'?: string \|` `undefined; '--nylas-color-grey-100'?: string \| undefined; '--nylas-color-grey-50'?: string \|` `undefined; '--nylas-color-white'?: string \| undefined; '--nylas-font-family'?: string \|` `undefined; '--nylas-font-size'?: string \| undefined; '--nylas-border-radius'?: string \|` `undefined; '--nylas-border-radius-2x'?: string \| undefined; '--nylas-border-radius-3x'?:` `string \| undefined; }`

Events

Event	Description
`valueChanged`	Fired when the specific date open hours change.

CSS parts

Part	Description
`nsdap`	The specific date availability picker container.
`nsdap__add-button`	The add button.
`nsdap__add-button-container`	The add button container.
`nsdap__content`	The main content area.
`nsdap__date-input`	The date input field.
`nsdap__date-input-container`	The date input container.
`nsdap__empty-icon`	The empty state icon.
`nsdap__empty-state`	The empty state container.
`nsdap__empty-subtitle`	The empty state subtitle.
`nsdap__empty-title`	The empty state title.
`nsdap__entry-content`	The entry content area.
`nsdap__error-message`	The error message display.
`nsdap__header`	The header section.
`nsdap__header-description`	The header description.
`nsdap__remove-button`	The remove button.
`nsdap__specific-date-entry`	The specific date entry.
`nsdap__specific-dates`	The specific dates container.
`nsdap__time-pickers`	The time pickers section.
`nsdap__toggle-button`	The toggle button.
`nsdap__unavailable-text`	The unavailable text.

Code samples

The nylas-specific-date-availability-picker element is automatically included in the main NylasSchedulerEditor component. The following code samples show how to use the element on its own.

<nylas-specific-date-availability-picker
  name="specific-date-availability"
  selected-configuration="your-config"
  specific-date-open-hours="your-specific-dates">
</nylas-specific-date-availability-picker>

// Listen for value changes
element.addEventListener('valueChanged', (event) => {
  const { value, name } = event.detail;
  console.log('Value changed:', { value, name });

  // Update your configuration
  updateSpecificDateAvailability(value, name);
});

<nylas-specific-date-availability-picker
  name="specific-date-availability"
  selected-configuration="your-config"
  specific-date-open-hours="your-specific-dates"
  theme-config='{
    "--nylas-primary": "#007bff",
    "--nylas-base-100": "#ffffff",
    "--nylas-border-radius": "8px"
  }'>
</nylas-specific-date-availability-picker>