nylas-selected-event-card

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

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: ['[email protected]']
};

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.

<nylas-selected-event-card
  selected-timeslot='{
    "start_time": "2024-01-15T10:00:00Z",
    "end_time": "2024-01-15T11:00:00Z",
    "emails": ["[email protected]"]
  }'
  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>