nylas-specific-time-availability-picker

Overview

The nylas-specific-time-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.1.0
Install (React)	npm install @nylas/react
Import (React)	import { NylasSpecificTimeAvailabilityPicker } 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

Property	Attribute	Description	Type	Default
name		The name of the specific date availability picker.	string	'specific-time-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
specificTimesAvailability		The specific date open hours.	SpecificTimeAvailability[] | undefined	undefined
themeConfig		The theme configuration.	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; }	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
"nstap"
"nstap__add-button"
"nstap__add-button-container"
"nstap__content"
"nstap__date-input"
"nstap__date-input-container"
"nstap__empty-icon"
"nstap__empty-state"
"nstap__empty-subtitle"
"nstap__empty-title"
"nstap__entry-content"
"nstap__error-message"
"nstap__header"
"nstap__header-description"
"nstap__remove-button"
"nstap__specific-time-entry"
"nstap__specific-times"
"nstap__time-pickers"
"nstap__toggle-button"
"nstap__unavailable-text"

---

Built with StencilJS