Calendar 日历
支持日期选择、范围选择和事件标记的日历组件。
基础用法
展示基础的单选日历。注意：组件使用 @internationalized/date 来处理日期。
3月 2026
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
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 | 4 |
Selected: 2026-03-24
Example
日期范围选择
设置 mode="range" 即可开启日期范围选择。
3月 2026
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
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 | 4 |
Start: 2026-03-24
End: 2026-03-31
Example
事件标记
通过 events 属性可以为特定日期添加标记。支持 dot (圆点)、badge (徽标) 和 text (文本) 三种标记类型，并可自定义颜色。
3月 2026
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
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 Wait | 28 |
29 Done | 30 | 31 | 1 | 2 | 3 | 4 |
Example
弹窗模式
结合 BrCalendarPopover 实现点击触发的日历弹窗。
Select Date:
Example
API
BrCalendar Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
modelValue | DateValue | DateValue[] | { start: DateValue, end: DateValue } | - | 绑定的日期值 |
mode | 'single' | 'multiple' | 'range' | 'single' | 选择模式 |
events | EventMarker[] | [] | 日期事件标记 |
displayMode | 'inline' | 'popover' | 'inline' | 展示模式 |
weekStartsOn | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 0 | 周起始日（0为周日） |
showToolbar | boolean | true | 是否显示工具栏 |
EventMarker 类型
| 属性 | 类型 | 说明 |
|---|---|---|
date | string | Date | DateValue | 目标日期 |
type | 'dot' | 'badge' | 'text' | 标记类型 |
color | string | 标记颜色（支持 CSS 变量） |
label | string | 悬浮提示文本 |