nylas-availability-settings

The nylas-availability-settings element allows users to configure their availability for scheduling. It provides options for setting working hours, buffer times, and availability rules.

Properties

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

`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; }`

Standalone properties

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

`availability?`


Name	`availability`
Description	The availability configuration object.
Type	`AvailabilitySettings \| undefined`

`timezone?`


Name	`timezone`
Description	The timezone for availability settings.
Type	string \| `undefined`

Events

Event	Description
`availabilityChanged`	Fired when availability settings are changed.

CSS parts

Part	Description
`nas`	The availability settings host.
`nas__working-hours`	Working hours section.
`nas__buffer-times`	Buffer times section.
`nas__availability-rules`	Availability rules section.
`nas__timezone`	Timezone selector.

Code samples

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

<nylas-availability-settings
  availability='{
    "working_hours": {
      "monday": {
        "start": "09:00",
        "end": "17:00"
      },
      "tuesday": {
        "start": "09:00",
        "end": "17:00"
      },
      "wednesday": {
        "start": "09:00",
        "end": "17:00"
      },
      "thursday": {
        "start": "09:00",
        "end": "17:00"
      },
      "friday": {
        "start": "09:00",
        "end": "17:00"
      }
    },
    "buffer_time": {
      "before": 15,
      "after": 15
    }
  }'
  timezone="America/New_York">
</nylas-availability-settings>

<nylas-availability-settings
  availability='{
    "working_hours": {
      "monday": {
        "start": "09:00",
        "end": "17:00"
      },
      "tuesday": {
        "start": "09:00",
        "end": "17:00"
      },
      "wednesday": {
        "start": "09:00",
        "end": "17:00"
      },
      "thursday": {
        "start": "09:00",
        "end": "17:00"
      },
      "friday": {
        "start": "09:00",
        "end": "17:00"
      }
    },
    "buffer_time": {
      "before": 30,
      "after": 30
    },
    "availability_rules": {
      "max_advance_booking": 30,
      "min_advance_booking": 2
    }
  }'
  timezone="America/New_York">
</nylas-availability-settings>

// Listen for availability changes
element.addEventListener('availabilityChanged', (event) => {
  const { availability, timezone } = event.detail;
  console.log('Availability changed:', { availability, timezone });

  // Update your configuration
  updateAvailabilitySettings(availability, timezone);
});

<nylas-availability-settings
  availability="your-availability-config"
  timezone="America/New_York"
  theme-config='{
    "--nylas-primary": "#007bff",
    "--nylas-base-100": "#ffffff",
    "--nylas-border-radius": "8px"
  }'>
</nylas-availability-settings>