# Event Card

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.

> Composed · Pro · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/event-card
```

## Import

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

## Variants

- `day` — Day view: `npx @lumioui/cli add pro/event-card-day`
- `invite` — Invite: `npx @lumioui/cli add pro/event-card-invite`
- `meeting` — Meeting: `npx @lumioui/cli add pro/event-card-meeting`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `title` | `string` | — |
| `start` | `Date` | — |
| `end` | `Date` | — |
| `allDay?` | `boolean` | All-day event — hides the time range. |
| `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. |
| `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). |
| `onPress?` | `() => void` | — |
| `className?` | `string` | — |

## Icons rendered

- `clock` — /icons.html?i=clock
- `map-pin` — /icons.html?i=map-pin

Source: https://lumioui.com/components/event-card