Calendar
日历
筛选栏
胶囊选择器两端对齐,边距 16px;日期行居中显示当前月份,左右箭头导航年/月
本年
本月
本周
自定义
上一月
2026年12月
下一月
选择单个日期
选中日期背景 DB60,文字白色,48×48px 矩形圆角 4px
日
一
二
三
四
五
六
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
2
3
选择日期区间
头尾日期样式同单选(DB60 背景 + 白色文字),区间内日期 DB10 背景 + G60 文字,右上角显示"班""休"等标签
日
一
二
三
四
五
六
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
2
3
属性值Token
筛选栏 — 胶囊选择器
高度32px--cal-filter-height
两端边距16px--cal-filter-side-padding
圆角全圆角 999px--cal-filter-radius
背景颜色#F5F7FA G05--cal-filter-bg → --G05
对齐方式两端对齐(justify-content: space-between)flexbox
选中项背景#FFFFFF G0 白色全圆角--cal-filter-active-bg → --G0
选中项高度28px(上下各 2px)--cal-filter-slider-height
选中文字颜色#223355 G60--cal-filter-active-text → --G60
未选中文字颜色#6B7A99 G50--cal-filter-text → --G50
选项文字本年、本月、本周、自定义—
日期头部 — 导航
当前月份字号16px/500--cal-header-font
当前月份颜色#223355 G60--cal-header-color → --G60
箭头图标颜色#A8B4C8 G40--cal-arrow-color → --G40
箭头图标尺寸16×16px--cal-arrow-size
上一月/下一月文字颜色#6B7A99 G50--cal-arrow-label-color → --G50
上一月/下一月字号12px/400—
左侧箭头排列上一年 → 上一月 → "上一月"—
右侧箭头排列"下一月" → 下一月 → 下一年—
星期行
字号13px/400--cal-week-font
颜色#A8B4C8 G40--cal-week-color → --G40
排列日 一 二 三 四 五 六—
日期格 — 通用
日期格尺寸48×48px--cal-day-size
日期格圆角4px--cal-day-radius
日期字号16px/400--cal-day-font
默认文字颜色#223355 G60--cal-day-color → --G60
其他月份日期颜色#CED4E0 G30other-month → --G30
日期格 — 单选选中
选中背景#3388FF DB60--cal-day-selected-bg → --DB60
选中文字颜色#FFFFFF G0 白色--cal-day-selected-text → --G0
选中字重500font-weight
日期格 — 区间内
区间背景#E8F1FF DB10--cal-day-range-bg → --DB10
区间文字颜色#223355 G60--cal-day-range-text → --G60
日期标签 — 班/休
标签字号12px/400--cal-day-label-font-size
标签背景尺寸12×12px--cal-day-label-size
标签背景圆角2px--cal-day-label-radius
标签位置右上角 top:4px right:4pxposition:absolute
"班"文字颜色#3388FF DB60--cal-day-label-work → --DB60
"班"背景颜色#E8F1FF DB10--cal-day-label-work-bg → --DB10
"休"文字颜色#F26450 R60--cal-day-label-rest → --R60
"休"背景颜色#FFECE8 R10--cal-day-label-rest-bg → --R10
"假"文字颜色#06A17F GB60--cal-day-label-leave → --GB60
"假"背景颜色#E8FAF1 GB10--cal-day-label-leave-bg → --GB10
默认标签颜色#6B7A99 G50--cal-day-label-color → --G50
动画
胶囊滑块0.2s cubic-bezier(.4,0,.2,1)transition
日期 hover0.12s easetransition
返回组件首页