Event Card

Pro

Calendar event as a card, list row or day-view block, with time, place, guests, video call and RSVP. The card fills a progress band while the event runs, and Join lights up just before a call.

Preview

Installation

npx @lumioui/cli add pro/event-card

Usage

import { formatClock, formatRange, formatDay, formatDuration, EventCard } from "@/components/ui/event-card/event-card";
<EventCard />

Also exported: formatClock, formatRange, formatDay, formatDuration.

Examples

Day view

A day view in a calendar app.

Invite

A group-dinner invite in a social calendar.

Meeting

A work calendar's "up next".

API reference

Prop Type Default
title* string —
start* Date —
end* Date —
allDay boolean

All-day event — hides the time range.

 false
location string

Room, address or "Video call".

 —
description string

Free-text note under the meta lines (card layout).

 —
calendarColor string

The event's calendar colour (hex). Default: the current primary.

 —
attendees AvatarGroupItem[]

Guests, shown as an overlapping stack.

 —
attendeeCount number

Guest count when it exceeds the avatars you pass.

 —
call EventCall

Video call — renders a Join button that turns primary when the event is near.

 —
response EventResponse

Your RSVP. With onResponseChange, renders Going / Maybe / No.

 —
onResponseChange (response: EventResponse) => void —
layout "card" | "row" | "block"

"card" (default) — full card. "row" — list row with a time column. "block" — day-view block that fills the height its parent gives it.

 "card"
showDate boolean

Prefix the time with the day ("Fri, Oct 9 · …"). Default: when the event is not today. Card layout only.

 —
now Date

Pin the clock (tests, previews). Default: live wall clock.

 —
trailing React.ReactNode

Trailing slot in the row layout (bookmark, avatar, chevron).

 —
selected boolean

Highlight as selected (block / row).

 false
onPress () => void —
className string —