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

`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

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