Calendar 日历
按日期浏览数据。清晰呈现业务事实、状态和变化。
实时示例
2026 July
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
28 | 29 | 30 | 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | 1 |
Vue 示例
<el-calendar />使用规则
先保证扫描与比较效率，再增加视觉强调；必须定义加载、空和错误状态。
不要通过局部硬编码改变品牌色、圆角或状态语义；不要隐藏必要的操作反馈。
状态与变体
- 默认、悬停、聚焦、按下和禁用状态必须保持可辨识。
- 加载、空、错误状态按业务影响选用，不用品牌强调色表达错误。
- 紧凑尺寸只用于高密度后台场景，触控目标仍应满足可操作要求。
基础用法
<el-calendar>日历</el-calendar>设计变量
color.background.surfacecolor.text.secondaryspacing.mdshadow.sm无障碍
状态同时使用文字；图片提供替代文本；复杂数据结构支持键盘浏览。