跳到主要内容
Termlib

UI 组件 · 数据展示

日历

Calendar

也叫：日程表、月历、日历视图、Scheduler

按月或按周排成网格的日期视图，直接在格子里显示每天的日程、事件或数据。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

做一个会议室预约日历：默认月视图，7 列网格，顶部是「‹ 2025 年 6 月 ›」和「今天」按钮，可切换月 / 周视图；每个日期格显示当天预约，最多 2 条，其余显示「+3 更多」，今天用深色圆圈标出，点击空白日期弹出新建预约对话框。

发给

01判断

你的内容是这样吗？

对照两列，确认日历是不是你要找的。

符合这些情况，用日历

  • 需要按日期查看和安排会议、排班、课程等日程
  • 数据和具体日期强相关，比如打卡记录、每日销售额
  • 用户需要一眼看到一整个月或一周的安排

是这些情况，换成别的

  • 只是在表单里选一个日期

    改用日期选择器

  • 事件只需按先后顺序浏览、不需要按日期格子定位

    改用时间线

  • 手机窄屏上要显示每天多条详细事件，月视图格子太小，改用列表视图

    改用列表

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    在注册表单里放一个整月大日历让用户选生日

  2. 02

    每格塞满事件文字，格子被撑高，整个月的网格参差不齐

  3. 03

    没有标出今天，也没有一键回到今天的按钮

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由顶部的月份切换栏和视图切换按钮、星期表头以及按周排列的日期格子组成，格子内放当天的事件条。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 17 列的日期网格，顶部一行是星期几
  2. 2顶部有月份标题和左右切换箭头
  3. 3部分格子里有彩色或灰色的事件小条

04解释

详细解释

日历组件把一个月画成 7 列、5~6 行的网格，每一格是一天，格子里可以放当天的会议、待办、排班或打卡记录；也可以切换成周视图、日视图，按小时展示时间段。顶部有上个月、下个月和「今天」按钮，今天的日期会特别标出。FullCalendar 是功能最全的日历库，常见组件库里也都有基础的 Calendar。

它和 日期选择器 最容易混淆：日期选择器是一个输入框，点开弹出一个小月历，目的是「选一个日期填进表单」，选完就收起；日历是直接铺在页面上的大面板，目的是「查看和安排这段时间里的事情」。如果只是让用户选生日、选预约日期，用日期选择器，不要把整个大日历放进表单。

开发者信息
术语 ID
component-calendar
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
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • calendar
  • calendar-view
  • month-view
  • fullcalendar
  • event-calendar
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Calendar
  • FullCalendar
  • DateCalendar
  • EventCalendar
优先级
1 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30