nylas-date-picker

The nylas-date-picker element allows users to select a date.

PreviewCode

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

export default function NylasDatePickerExample() {
return (
<div className="inline-block border border-dashed border-gray-300 rounded-md p-4">
  <NylasDatePicker />
</div>
);
}

Properties

eventDuration?

Name	eventDuration
Description	The event duration.
Type	number | undefined

isLoading?

Name	isLoading
Description	The loading state.
Type	boolean | undefined

selectedDate?

Name	selectedDate
Description	The selected date.
Type	Date | 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

selectedTimezone?

Name	selectedTimezone
Description	The selected time zone.
Type	string

Standalone properties

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

configSettings?

Name	configSettings
Description	The Configuration settings for the Scheduler.
Type	undefined | { configuration_id: string; booking?: { additional_fields: Record<string, string>; additional_guests: { email: string; name: string; }[]; booking_ref: string; booking_ref_salt: string; guest: { email: string; name: string; }; timezone: string; email_language: string; event_data: { location: string; when: { start_time: Date; end_time: Date; end_timezone: string; start_timezone: string; object: string; }; }; event_organizer: { name: string; email: string; is_organizer: boolean; }; } | undefined; scheduler: { available_days_in_future: number; min_cancellation_notice: number; min_booking_notice: number; rescheduling_url?: string | undefined; cancellation_url?: string | undefined; cancellation_policy?: string | undefined; hide_additional_guests?: boolean | undefined; hide_cancellation_options?: boolean | undefined; hide_rescheduling_options?: boolean | undefined; additional_fields?: Record<string, AdditionalFields> | undefined; confirmation_redirect_url?: string | undefined; organizer_confirmation_url?: string | undefined; }; organizer: { name: string; email: string; }; slug: string; appearance: Appearance; booking_type: string; name: string; }

selectableDates?

Name	selectableDates
Description	The dates that are selectable.
Type	Date[] | undefined

themeConfig?

Name	themeConfig
Description	The theme configuration.
Type	any

Events

Event	Description
dateSelected	Fired when a date is selected.
monthChanged	Fired when the month is changed.

CSS parts

Part	Description
ndp	The date picker host.
ndp__date	The date.
ndp__date--current-day	The current day.
ndp__date--current-month	The dates in the current month.
ndp__date--disabled	The disabled dates.
ndp__date--selected	The selected date.
ndp__day	The day.
ndp__month-button	The month button.
ndp__month-header	The month header.
ndp__title	The title.

Code samples

The nylas-date-picker element is automatically included in the main NylasScheduling component. The following code samples show how to use the element on its own.

StandaloneEvent handlersCustom theme

<nylas-date-picker
  availability='[
    {
      "start_time": "2024-01-15T10:00:00Z",
      "end_time": "2024-01-15T11:00:00Z",
      "available": true
    },
    {
      "start_time": "2024-01-16T10:00:00Z",
      "end_time": "2024-01-16T11:00:00Z",
      "available": true
    }
  ]'
  selected-date="2024-01-15T00:00:00Z"
  selected-timezone="America/New_York"
  on-date-selected="handleDateSelected"
  on-month-changed="handleMonthChanged"
></nylas-date-picker>

// Listen for date selection
element.addEventListener("dateSelected", (event) => {
  console.log("Date selected:", event.detail);
});

// Listen for month changes
element.addEventListener("monthChanged", (event) => {
  console.log("Month changed:", event.detail);
});

<nylas-date-picker
  availability="..."
  selected-date="2024-01-15T00:00:00Z"
  theme-config='{
    "--nylas-primary": "#007bff",
    "--nylas-base-100": "#ffffff",
    "--nylas-border-radius": "8px"
  }'
></nylas-date-picker>