Calendar event
A meeting the agent proposes, with who is free, and buttons to add it or ask for another time.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/calendar-event.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/calendar-event.json
Usage & API
Example
import { CalendarEventCard } from "@/components/ai/calendar-event"
<CalendarEventCard
title="…"
slot={slot}
attendees={[]}
location="…"
state="proposed"
onAdd={() => {}}
onSuggest={() => {}}
/>Props CalendarEventCard
| Prop | Type & description | Required |
|---|---|---|
title | string | Required |
slot | Slot | Required |
attendees | Attendee[] | Required |
location | string | Required |
link | string | Optional |
state | "proposed" | "finding" | "added" | Required |
onAdd | () => void | Required |
onSuggest | () => void | Required |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
Proposed event is the only variant. The sample title is Design review: checkout flow, the location is Room 4B, second floor, and the link line is Video link added. The people are Sam Lee, Priya Raman, Tom Okafor and Ines Duarte, each with a colour. The first slot is Friday 31 October, 10:00 to 10:45, 45 minutes, with the note Everyone is free. Suggest another time enters finding, then lands on Monday 3 November, 13:30 to 14:15, where Ines is busy and the note says she has a clash. A further suggest lands on Tuesday 4 November, 9:15 to 10:00, with everyone free again. Add to calendar sets the added state and relabels the button. It does not cycle the slot. Both buttons are quiet during finding and after the event is added.
Choosing a layout
Use it when the agent has a specific meeting to propose and the person should accept it or reject the time. One design review, a call with a known set of people, or a room you already resolved fits. Do not use it as a general month view. There is one slot on screen. If the first time is bad, onSuggest is how another slot replaces it. Keep the attendee status honest. The amber note and the faded initials are the only signal that someone cannot make it, and they come entirely from the status you set.
An email draft is the better fit when the output is the wording of a message, with a subject and a send step, even if the message is about a meeting. An itinerary is the better fit for a day of stops and a route, with no attendees and no add button. A weather card is a forecast. A product card is something to buy. None of those have a free or busy row. If you only need to show a time the person already agreed, you can leave the card in the added state, but the useful moment is proposed, while both buttons still work.
Does Add to calendar write to a calendar account?
No. It calls onAdd. The sample only sets the local state to added, which changes the button label to Added and disables both actions. There is no OAuth step, no invite, and no conflict check inside the card. If a real write can fail, stay on proposed until it succeeds, because added is a finished label, not a pending one.
Why are both buttons disabled while the note says it is checking calendars?
Because the state is finding, and both buttons enable only when the state is proposed. The spinning icon and the faded date are the same signal. The sample enters finding from Suggest another time, waits, then swaps the slot and returns to proposed, which enables the buttons again. Add to calendar is not available in the middle of that lookup, and it is not available after the event has been marked added.