Calendar Agenda View
A calendar panel where a month grid and the day's agenda move together, with colored event tags.
This is a WebberUI Pro component
Free during the launch campaign: sign up or sign in, then hit “Copy install command” in the preview above and it installs straight away — no payment, no credit card. The command below returns 401 while you are signed out.
On the left, a month grid shows every day of the month with colored dots marking days that have events, and the selected circle moves smoothly between dates via layoutId; on the right, an agenda timeline switches the day's event cards with AnimatePresence — a good fit for a schedule overview inside a dashboard or an app panel.
npx shadcn@latest add "https://webberui.com/r/calendar-agenda-view.json?t=<install token>"Playground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<CalendarAgendaView />
Installation
npx shadcn@latest add "https://webberui.com/r/calendar-agenda-view.json?t=<install token>"Or, once registries are configured in components.json, install it as @webberui/calendar-agenda-view.
Usage
import {
CalendarAgendaView,
type AgendaEvent,
} from "@/components/ui/calendar-agenda-view";
const events: AgendaEvent[] = [
{
id: "e1",
day: 16,
start: "09:30",
end: "10:30",
title: "Product weekly",
location: "Meeting room A",
attendees: 8,
color: "sky",
},
];
<CalendarAgendaView
year={2026}
month={7}
events={events}
defaultSelectedDay={16}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
year | number | 2026 | The year shown (a fixed value, so SSR and the client agree) |
month | number | 7 | The month shown, 1–12 |
events | AgendaEvent[] | [] | Event list; grouped by day and then sorted by start time automatically |
defaultSelectedDay | number | 1 | Initially selected day (1-based) |
className | string | — | Forwarded to the outermost card container |
AgendaEvent
| Field | Type | Default | Description |
|---|---|---|---|
id | string | — | Unique event identifier |
day | number | — | Which day of the month the event falls on (1-based) |
start | string | — | Start time as a 24-hour string, for example "09:30" |
end | string | — | End time as a 24-hour string, for example "10:30" |
title | string | — | Event title |
location | string | — | Location or supporting note (optional) |
attendees | number | — | Number of attendees (optional); when set, a count badge is shown |
color | "sky" | "violet" | "emerald" | "amber" | "rose" | "sky" | Color tag, which sets the color of the calendar dot and the agenda card's color bar |
Accessibility
- Every day cell is a native
buttonmarked witharia-pressedfor the selected state, and itsaria-labelreads out the full date and how many events that day has - Day cells support Tab navigation and a
focus-visiblefocus ring - When the user has "reduce motion" enabled at the system level, the selected circle's movement and the agenda switch animations complete instantly
- The event color tags are only a supporting marker — time, title, and location are all presented as text, so no information depends on color