行事曆議程視圖
月曆與當日議程聯動的行事曆面板，事件色籤。
左側月曆網格顯示整月天數，有事件的日期以色點標記，選中圓圈透過 layoutId 在日期間平滑移動；右側議程時間軸以 AnimatePresence 切換當日事件卡，適合儀表板或應用面板中的排程總覽。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
2026
7
15
<CalendarAgendaView />
安裝
npx shadcn@latest add https://webberui.com/r/calendar-agenda-view.json或在 components.json 設定 registries 後，改用 @webberui/calendar-agenda-view 安裝。
安裝依賴後，從 registry JSON（/r/calendar-agenda-view.json 的 files[0].content）複製 calendar-agenda-view.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import {
CalendarAgendaView,
type AgendaEvent,
} from "@/components/ui/calendar-agenda-view";
const events: AgendaEvent[] = [
{
id: "e1",
day: 16,
start: "09:30",
end: "10:30",
title: "產品週會",
location: "會議室 A",
attendees: 8,
color: "sky",
},
];
<CalendarAgendaView
year={2026}
month={7}
events={events}
defaultSelectedDay={16}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
year | number | 2026 | 顯示的年份（固定值以確保 SSR 與客戶端一致） |
month | number | 7 | 顯示的月份，1–12 |
events | AgendaEvent[] | [] | 事件清單，依 day 分組後自動按開始時間排序 |
defaultSelectedDay | number | 1 | 初始選中的日（1 起算） |
className | string | — | 透傳到最外層卡片容器 |
AgendaEvent
| 欄位 | 型別 | 預設值 | 說明 |
|---|---|---|---|
id | string | — | 事件唯一識別碼 |
day | number | — | 事件位於該月份的第幾天（1 起算） |
start | string | — | 開始時間，24 小時制字串，例如 "09:30" |
end | string | — | 結束時間，24 小時制字串，例如 "10:30" |
title | string | — | 事件標題 |
location | string | — | 地點或補充說明（可選） |
attendees | number | — | 參與人數（可選），有值時顯示人數徽章 |
color | "sky" | "violet" | "emerald" | "amber" | "rose" | "sky" | 色籤，決定日曆圓點與議程卡色條的顏色 |
可及性
- 每個日期格皆為原生
button，以aria-pressed標記選中狀態，aria-label完整朗讀日期與當日行程數 - 日期格支援鍵盤 Tab 導覽與
focus-visible焦點環 - 使用者系統開啟「減少動態效果」時，選中圓圈位移與議程切換動畫改為即時完成
- 事件色籤僅作輔助標記，時間、標題、地點皆以文字呈現，不依賴顏色傳達資訊