nylas-event-timeslot

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

PreviewCode

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

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

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

StandaloneEvent handlersCustom theme

<nylas-event-timeslot
  name="event-timeslot"
  current-user="your-current-user"
  initial-value="your-initial-value">
</nylas-event-timeslot>

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