Skip to main content
The Calendar Event Card displays event information with a color-coded indicator bar, status management, and optional action buttons. Perfect for AI agents that interact with calendars.

​
Preview

import { 
  CalendarEventCard,
  EventTitle,
  EventTime,
  EventLocation 
} from "@/components/ui/calendar-event-card";

export default function Example() {
  return (
    <CalendarEventCard
      eventColor="#3b82f6"
      label="Today, 2:00 PM"
      variant="display"
    >
      <EventTitle>Team Standup</EventTitle>
      <EventTime startTime="2:00 PM" endTime="2:30 PM" />
      <EventLocation>Conference Room A</EventLocation>
    </CalendarEventCard>
  );
}

​
Installation

npx shadcn@latest add "https://ui.heygaia.io/r/calendar-event-card"

​
Usage

​
Display Variant

For showing existing events without actions: 
import { CalendarEventCard, EventTitle, EventTime } from "@/components/ui/calendar-event-card";

<CalendarEventCard
  eventColor="#3b82f6"
  label="Today, 2:00 PM"
  variant="display"
>
  <EventTitle>Team Meeting</EventTitle>
  <EventTime startTime="2:00 PM" endTime="3:00 PM" />
</CalendarEventCard>

​
Action Variant

For events requiring user confirmation: 
import { CalendarEventCard, EventTitle, EventTime } from "@/components/ui/calendar-event-card";
import { useState } from "react";

function EventWithAction() {
  const [status, setStatus] = useState("idle");

  const handleAction = async () => {
    setStatus("loading");
    await createEvent();
    setStatus("completed");
  };

  return (
    <CalendarEventCard
      eventColor="#10b981"
      label="Tomorrow"
      variant="action"
      status={status}
      onAction={handleAction}
    >
      <EventTitle>New Event</EventTitle>
      <EventTime startTime="10:00 AM" endTime="11:00 AM" />
    </CalendarEventCard>
  );
}

​
Dotted Border (Proposed Event)

<CalendarEventCard
  eventColor="#3b82f6"
  label="Proposed"
  isDotted={true}
  variant="action"
  status="idle"
  onAction={handleAccept}
>
  <EventTitle>Coffee Chat</EventTitle>
  <EventTime startTime="3:00 PM" endTime="3:30 PM" />
</CalendarEventCard>

​
Custom Opacity

<CalendarEventCard
  eventColor="#6b7280"
  label="Past Event"
  opacity={0.5}
>
  <EventTitle>Yesterday's Meeting</EventTitle>
  <EventTime startTime="9:00 AM" endTime="10:00 AM" />
</CalendarEventCard>

​
Danger Action

<CalendarEventCard
  eventColor="#ef4444"
  label="Conflicting Event"
  variant="action"
  buttonColor="danger"
  status="idle"
  onAction={handleCancel}
>
  <EventTitle>Cancel This Meeting</EventTitle>
  <EventTime startTime="2:00 PM" endTime="3:00 PM" />
</CalendarEventCard>

​
Props

​
CalendarEventCard

​
eventColor
string
required
Hex color code for the event indicator bar and background tint (e.g., #3b82f6)
​
children
ReactNode
required
Event content - typically EventTitle, EventTime, and EventLocation components
​
variant
'display' | 'action'
default:"'display'"
Card variant:
  • display: Shows event information only
  • action: Includes a confirm button
​
status
'idle' | 'loading' | 'completed'
default:"'idle'"
Button status for action variant:
  • idle: Ready for action
  • loading: Processing
  • completed: Action completed (button disabled)
​
label
string
Optional label shown above the event content (e.g., “Today, 2:00 PM”)
​
buttonColor
'primary' | 'danger'
default:"'primary'"
Color scheme for the action button:
  • primary: Sky blue
  • danger: Red
​
completedLabel
string
default:"'Completed'"
Text shown on the button when status is completed
​
onAction
() => void
Callback function called when the confirm button is clicked (only for action variant)
​
isDotted
boolean
default:"false"
Whether to show a dotted border (useful for proposed/tentative events)
​
opacity
number
default:"1"
Card opacity (0-1). Completed events automatically get 0.5 opacity.
​
className
string
Additional CSS classes to apply to the card

​
Helper Components

​
EventTitle

​
children
ReactNode
required
The event title text
​
className
string
Additional CSS classes

​
EventTime

​
startTime
string
required
Start time (e.g., “2:00 PM”)
​
endTime
string
End time (e.g., “3:00 PM”). Shows as “2:00 PM - 3:00 PM” when provided.
​
className
string
Additional CSS classes

​
EventLocation

​
children
ReactNode
required
Location text or component
​
className
string
Additional CSS classes

​
Features

​
Color Coding

The eventColor prop determines:
  • Vertical indicator bar color
  • Background tint color (20% opacity)
  • Border color for dotted variant (50% opacity)

​
Status Management

Action buttons show different states:
  • Idle: “Confirm” button ready
  • Loading: Spinner with “Confirm” text
  • Completed: Checkmark with custom label, button disabled

​
Visual Variants

  • Display: Aligned to start, compact layout
  • Action: Aligned to end to accommodate button
  • Dotted: Dashed border for proposed events

​
Accessibility

  • Semantic HTML with proper button elements
  • Disabled state for completed actions
  • Clear visual feedback for all states
  • Color-coded with both color and text indicators

​
Common Use Cases

​
AI Calendar Agent

// Proposed event from AI
<CalendarEventCard
  eventColor="#3b82f6"
  label="Proposed for Tomorrow"
  variant="action"
  isDotted={true}
  status={status}
  onAction={createEvent}
>
  <EventTitle>1-on-1 with Sarah</EventTitle>
  <EventTime startTime="2:00 PM" endTime="2:30 PM" />
  <EventLocation>Video Call</EventLocation>
</CalendarEventCard>

​
Conflict Resolution

// Show conflicting event that needs attention
<CalendarEventCard
  eventColor="#ef4444"
  label="Conflicts with existing event"
  variant="action"
  buttonColor="danger"
  status="idle"
  completedLabel="Cancelled"
  onAction={cancelEvent}
>
  <EventTitle>Overlapping Meeting</EventTitle>
  <EventTime startTime="2:00 PM" endTime="3:00 PM" />
</CalendarEventCard>

​
Event History

// Past event with reduced opacity
<CalendarEventCard
  eventColor="#6b7280"
  label="Yesterday"
  opacity={0.5}
>
  <EventTitle>Design Review</EventTitle>
  <EventTime startTime="10:00 AM" endTime="11:00 AM" />
  <EventLocation>Completed</EventLocation>
</CalendarEventCard>
Use color coding consistently across your app. For example: blue for meetings, green for personal events, red for deadlines.
The card automatically handles opacity for completed events. You don’t need to set it manually unless you want a different value.

Build docs developers (and LLMs) love

Get started for freeTalk to us