nylas-booked-event-card

The nylas-booked-event-card element displays a confirmation card showing the details of a successfully booked event. It shows the event information, selected time slot, and provides options for cancelling or rescheduling the event.

PreviewCode

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

export default function NylasBookedEventCardExample() {
const mockEventInfo = {
booking_id: "booking_123",
organizer: {
  email: "organizer@example.com",
  name: "John Doe",
},
title: "Meeting with John",
description: "Discuss project details",
status: "confirmed",
event_id: "event_456",
location: "Conference Room A",
booking_ref: "ref_789",
};

const mockSelectedTimeslot = {
start_time: new Date("2024-01-15T10:00:00Z"),
end_time: new Date("2024-01-15T11:00:00Z"),
};

return (
<div className="inline-block border border-dashed border-gray-300 min-w-[400px] rounded-md p-4 justify-center">
  <NylasBookedEventCard
    eventInfo={mockEventInfo}
    selectedTimeslot={mockSelectedTimeslot}
  />
</div>
);
}

Properties

hour12?

Name	hour12
Description	Set whether to use the 12-hour time format.
Type	boolean | undefined

selectedLanguage?

Name	selectedLanguage
Description	The selected language.
Type	string
Default	navigator.language

selectedTimeslot?

Name	selectedTimeslot
Description	The selected time slot.
Type	{ 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 timezone.
Type	string
Default	Intl.DateTimeFormat().resolvedOptions().timeZone

Standalone properties

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

bookingInfo?

Name	bookingInfo
Description	The booking information used to book/reschedule the event.
Type	undefined | { primaryParticipant: NylasSchedulerBookingParticipant; startTime?: Date | undefined; endTime?: Date | undefined; timezone?: string | undefined; language?: string | undefined; guests?: NylasSchedulerBookingParticipant[] | undefined; additionalFields?: Record<string, { value: string; type?: string | undefined; readOnly?: boolean | undefined; }> | undefined; }

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

eventInfo?

Name	eventInfo
Description	The booked event.
Type	{ booking_id: string; organizer: { email: string; name: string; is_organizer?: boolean | undefined; }; title: string; description: string; status: string; event_id: string; location: string; booking_ref: string; }

isLoading?

Name	isLoading
Description	The loading state prop. Used to display loading state when fetching availability.
Type	boolean | undefined

rescheduleBookingId?

Name	rescheduleBookingId
Description	The booking flow type.
Type	string | undefined

themeConfig?

Name	themeConfig
Description	The theme configuration.
Type	any

Events

Event	Description
cancelBookedEventValidationError	Fired when an error occurs while cancelling the booking.
cancelBookingButtonClicked	Cancel booking button clicked event.
rescheduleBookedEventError	Fired when an error occurs while rescheduling the booking.
rescheduleButtonClicked	Reschedule button clicked event.

CSS parts

Part	Description
nbec	The booked event card host.
nbec__button-outline	The cancel and reschedule button CTA.
nbec__cancel-cta	The cancel button CTA.
nbec__card	The booked event card.
nbec__description	The description of the booked event card.
nbec__reschedule-cta	The reschedule button CTA.
nbec__title	The title of the booked event card.

Code samples

The nylas-booked-event-card 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-booked-event-card
  event-info='{
    "booking_id": "booking_123",
    "organizer": {
      "email": "organizer@example.com",
      "name": "John Doe"
    },
    "title": "Meeting with John",
    "description": "Discuss project details",
    "status": "confirmed",
    "event_id": "event_456",
    "location": "Conference Room A",
    "booking_ref": "ref_789"
  }'
  selected-timeslot='{
    "start_time": "2024-01-15T10:00:00Z",
    "end_time": "2024-01-15T11:00:00Z"
  }'
></nylas-booked-event-card>

// Listen for cancel booking button clicks
element.addEventListener("cancelBookingButtonClicked", (event) => {
  console.log("Cancel booking clicked:", event.detail.bookingId);
});

// Listen for reschedule button clicks
element.addEventListener("rescheduleButtonClicked", (event) => {
  console.log("Reschedule clicked:", event.detail.bookingId);
});

// Listen for validation errors
element.addEventListener("cancelBookedEventValidationError", (event) => {
  console.log("Validation error:", event.detail.error);
});

<nylas-booked-event-card
  event-info="{...}"
  selected-timeslot="{...}"
  theme-config='{
    "--nylas-primary": "#007bff",
    "--nylas-base-100": "#ffffff",
    "--nylas-border-radius": "8px"
  }'
></nylas-booked-event-card>