nylas-event-timeslot

The nylas-event-timeslot element allows users to select the event type for the Scheduler Configuration.

import { NylasEventTimeslot } from "@nylas/react";

export default function NylasEventTimeslotExample() {
return (
<div className="inline-block border border-dashed border-gray-300 min-w-[400px] rounded-md p-4 justify-center">
  <NylasEventTimeslot
    startTime="09:00"
    endTime="10:00"
    timezone="America/New_York"
  />
</div>
);
}

Properties

`currentUser?`


Name	`currentUser`
Description	The current user.
Type	`undefined \| { id: string; email: string; name?: string \| undefined; provider?: string \|` `undefined; }`

`initialValue?`


Name	`initialValue`
Description	The initial value of the event time slot.
Type	`undefined \| { when: { start_time: number; end_time: number; start_timezone: string;` `end_timezone: string; }; recurrence: string[]; }`

`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

`name?`


Name	`name`
Description	The name of the element.
Type	string
Default	`'event-timeslot'`

Events

Event	Description
`dateTimeInputError`	Fired when the value of the event time slot changes.
`timeWindowFormError`	Fired when the value of the event time slot changes.
`valueChanged`	Fired when the value of the event location changes.

CSS parts

Part	Description
`netimeslot`
`netimeslot__custom-recurrence`
`netimeslot__date-time-input`
`netimeslot__date-time-picker`
`netimeslot__recurrence-end`
`netimeslot__recurrence-options`
`netimeslot__recurrence-type`
`netimeslot__time-range`

Code samples

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

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

// Listen for date/time input errors
element.addEventListener("dateTimeInputError", (event) => {
  const { key, message } = event.detail;
  console.log("Date/time input error:", { key, message });

  // Handle the error
  handleDateTimeError(key, message);
});

// Listen for time window form errors
element.addEventListener("timeWindowFormError", (event) => {
  const { key, message, uniqueIdentifier } = event.detail;
  console.log("Time window form error:", { key, message, uniqueIdentifier });

  // Handle the error
  handleTimeWindowError(key, message, uniqueIdentifier);
});

<nylas-event-timeslot
  name="event-timeslot"
  current-user="your-current-user"
  initial-value="your-initial-value"
  theme-config='{
    "--nylas-primary": "#007bff",
    "--nylas-base-100": "#ffffff",
    "--nylas-border-radius": "8px"
  }'
></nylas-event-timeslot>