nylas-selected-event-card

The nylas-organizer-confirmation-card element displays the organizer confirmation card.

PreviewCode

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

export default function NylasSelectedEventCardExample() {
const mockSelectedTimeslot = {
start_time: new Date("2024-01-15T10:00:00Z"),
end_time: new Date("2024-01-15T11:00:00Z"),
emails: ["attendee@example.com"],
};

return (
<div className="inline-block border border-dashed border-gray-300 min-w-[400px] rounded-md p-4 justify-center">
  <NylasSelectedEventCard
    selectedTimeslot={mockSelectedTimeslot}
    eventTitle="Meeting with John"
    eventDescription="Discuss project details"
    eventLocation="Conference Room A"
  />
</div>
);
}

Properties

hour12?

Name	hour12
Description	The 12-hour time format.
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

selectedTimeslot?

Name	selectedTimeslot
Description	The selected time slot.
Type	undefined | { start_time: Date; end_time: Date; emails?: string[] | undefined; capacity?: number | undefined; event_id?: string | undefined; master_id?: string | undefined; calendar_id?: string | 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.

themeConfig?

Name	themeConfig
Description	The theme configuration.
Type	any

CSS parts

Part	Description
nsec	The selected event card component.
nsec__card	The card component.
nsec__date	The date selected.
nsec__icon	The calendar icon.
nsec__time	The time slot selected.
nsec__timezone	The time zone selected.

Code samples

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

StandaloneAlternate time formatCustom theme

<nylas-selected-event-card
  selected-timeslot='{
    "start_time": "2024-01-15T10:00:00Z",
    "end_time": "2024-01-15T11:00:00Z",
    "emails": ["attendee@example.com"]
  }'
  event-title="Meeting with John"
  event-description="Discuss project details"
  event-location="Conference Room A"
></nylas-selected-event-card>

<nylas-selected-event-card
  selected-timeslot="{...}"
  event-title="Meeting with John"
  event-description="Discuss project details"
  event-location="Conference Room A"
  hour12="true"
></nylas-selected-event-card>

<nylas-selected-event-card
  selected-timeslot="{...}"
  event-title="Meeting with John"
  event-description="Discuss project details"
  event-location="Conference Room A"
  theme-config='{
    "--nylas-primary": "#007bff",
    "--nylas-base-100": "#ffffff",
    "--nylas-border-radius": "8px"
  }'
></nylas-selected-event-card>