日历
Calendar
UI 组件也叫：日程表、月历、日历视图、Scheduler
一句话：按月或按周排成网格的日期视图，直接在格子里显示每天的日程、事件或数据。
详细解释
日历组件把一个月画成 7 列、5~6 行的网格，每一格是一天，格子里可以放当天的会议、待办、排班或打卡记录；也可以切换成周视图、日视图，按小时展示时间段。顶部有上个月、下个月和「今天」按钮，今天的日期会特别标出。FullCalendar 是功能最全的日历库，常见组件库里也都有基础的 Calendar。
它和 日期选择器 最容易混淆：日期选择器是一个输入框，点开弹出一个小月历，目的是「选一个日期填进表单」，选完就收起；日历是直接铺在页面上的大面板，目的是「查看和安排这段时间里的事情」。如果只是让用户选生日、选预约日期，用日期选择器，不要把整个大日历放进表单。
示例
灰度线框示意，只表达结构，不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。
做一个会议室预约日历：默认月视图，7 列网格，顶部是「‹ 2025 年 6 月 ›」和「今天」按钮，可切换月 / 周视图；每个日期格显示当天预约，最多 2 条，其余显示「+3 更多」，今天用深色圆圈标出，点击空白日期弹出新建预约对话框。
结构与适用场景
结构描述
由顶部的月份切换栏和视图切换按钮、星期表头以及按周排列的日期格子组成，格子内放当天的事件条。
适用场景
- 需要按日期查看和安排会议、排班、课程等日程
- 数据和具体日期强相关，比如打卡记录、每日销售额
- 用户需要一眼看到一整个月或一周的安排
不适用场景
- 只是在表单里选一个日期，用日期选择器
- 事件只需按先后顺序浏览、不需要按日期格子定位，用时间线
- 手机窄屏上要显示每天多条详细事件，月视图格子太小，改用列表视图
常见坏用法
- 在注册表单里放一个整月大日历让用户选生日
- 每格塞满事件文字，格子被撑高，整个月的网格参差不齐
- 没有标出今天，也没有一键回到今天的按钮
识别特征
- 7 列的日期网格，顶部一行是星期几
- 顶部有月份标题和左右切换箭头
- 部分格子里有彩色或灰色的事件小条
DOM 线索
插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。
.ant-picker-calendar.el-calendar[class*="MuiDateCalendar-root"]:not([role="dialog"] *).arco-calendar.t-calendar.n-calendar[data-slot="calendar"]:not([data-slot="popover-content"] *).fc