Calendar 日历
Calendar 现在同时覆盖 Rue 原生月历面板、事项渲染、卡片式日历,以及 Cally、Pikaday 两条基础接入链路。
Month / Year 两种面板
新增默认 Calendar 面板,支持 value、mode、validRange、showWeek 与 headerRender。
细胞级渲染能力
cellRender 和 fullCellRender 可以把普通日期格组织为事项列表、容量卡或数据看板。
基础场景完整覆盖
Calendar.Cally、Calendar.Month、Calendar.PikaSingle 仍然可用,基础接入方式不需要拆。
# Basic calendar
默认面板,覆盖受控日期、范围限制、禁用规则与周序号。
日期范围被限制在 2026 年 4 至 5 月之间,适合产品排期、门店值班或发布窗口场景。
# Notice calendar
使用 cellRender 在日期格展示事项,在年视图展示月份 backlog。
事项日历会在页面显示后自动初始化,不再需要手动点击加载。
# Card mode
缩成仪表盘卡片,再用 fullCellRender 为少量日期挂上负载进度。
卡片模式会在后台分帧挂载,避免首屏一次性把多个重预览一起算完。
# Custom header
接管顶部工具条,自定义模式切换、年份与月份选择器。
自定义头部示例会在页面稳定后自动挂载,减少首屏阻塞。
# Cally calendar example
基础的 Cally web component 日历壳层仍然原样可用。
Cally 预览会延后挂载,避免阻塞第一个日历示例。
# Cally date picker example
基础的日期输入弹层示例 展示,只把交互说明和布局重新编排。
日期输入弹层会延后挂载,页面主体优先完成交互。
# Pikaday input example
展示基础 pika-single 输入壳层,让第三方实例继续挂载在 Rue 组件树里。
Pikaday 第三方实例会延后初始化,避免拖慢首屏。
API
默认 Calendar 面板聚焦于日历组件常见的核心交互能力,同时使用 Rue 自己的视觉和基础导出方式。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
cellRender | 按日期格或月份格补充内容,适合放日程列表、状态徽标等轻量信息 | (date: Date, info) => any | - |
defaultValue | 非受控模式下的初始日期 | Date | string | number | new Date() |
disabledDate | 禁用特定日期;会同时影响日期格、月份导航与年份导航 | (date: Date) => boolean | - |
fullscreen | 切换为大面板或卡片模式 | boolean | true |
fullCellRender | 完全接管单元格内容,适合 KPI、容量卡片等更强视觉定制 | (date: Date, info) => any | - |
headerRender | 自定义头部,拿到年/月选项与模式切换方法 | (config) => any | - |
mode | 视图模式,可在月视图与年视图之间切换 | 'month' | 'year' | 'month' |
onRenderProfile | 渲染诊断回调,报告当前更新阶段、耗时、cellRender 调用次数与慢单元格 | (event: CalendarRenderProfileEvent) => void | - |
renderProfileThreshold | 渲染诊断的慢调用阈值,超过后会在 onRenderProfile 中标记 slow | number | 16 |
showWeek | 月视图下显示 ISO 周序号,适合排班和周计划看板 | boolean | false |
validRange | 限定可浏览与可选择的日期范围 | [Date | string | number, Date | string | number] | - |
value | 受控日期;通常与 onChange、onPanelChange 搭配 | Date | string | number | - |
weekStartsOn | 自定义周起始日,0 表示周日,1 表示周一 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 1 |
附属导出
基础的 Cally 与 Pikaday 接口没有删除,而是并列保持为复合导出,便于按需接入。
| 导出 | 说明 |
|---|---|
Calendar.Cally | 展示基础 Cally web component 容器,适合需要 slot 导航的原生体验 |
Calendar.Month | Cally 的月份节点,和 Calendar.Cally 组合使用 |
Calendar.PikaSingle | Pikaday 输入框样式包装,仍可按原方式挂载第三方实例 |