Calendar Agenda View: React + Tailwind Component

A calendar panel where a month grid and the day's agenda move together, with colored event tags.

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add "https://webberui.com/r/calendar-agenda-view.en.json?t=<install token>"

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Yearyear

2026

Monthmonth

Initially selected daydefaultSelectedDay

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<CalendarAgendaView/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add "https://webberui.com/r/calendar-agenda-view.en.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 button marked with aria-pressed for the selected state, and its aria-label reads out the full date and how many events that day has
Day cells support Tab navigation and a focus-visible focus 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

Calendar Agenda View