R后悔药 Rue.js
  • 首页
    • 深度指南
    • 实战例子
    • 快速上手
    • 路由指南
    • 术语表
    • 错误代码参考
  • API
    • 合作伙伴
    • 插件
    • 组件库
    • 工具链
    • Text.js
    • 新闻简报
    • 常见问题
    • 团队
    • 版本发布
    • 社区指南
    • 行为规范
    • 隐私政策
  • 赞助
  • 合作伙伴
设置
目录统计
总条目
  • 按钮 Button
  • 排版 Typography
  • 时间选择器 TimePicker
  • 下拉菜单 Dropdown
  • 悬浮操作按钮 FAB
  • 模态框 Modal
  • 切换 Swap
  • 主题控制器 Theme Controller
  • 手风琴 Accordion
  • 头像 Avatar
  • 徽标 Badge
  • 卡片 Card
  • 轮播 Carousel
  • 聊天气泡 Chat
  • 折叠面板 Collapse
  • 倒计时 Countdown
  • 描述列表 Descriptions
  • 对比 Diff
  • 二维码 QRCode
  • 悬浮 3D 卡片 Hover 3D
  • 悬浮画廊 Hover Gallery
  • 键盘提示 Kbd
  • 列表 List
  • 统计 Stat
  • 状态 Status
  • 表格 Table
  • 文本轮播 Text Rotate
  • 时间线 Timeline
  • 锚点 Anchor
  • 固钉 Affix
  • 面包屑 Breadcrumbs
  • 底部导航 Dock
  • 链接 Link
  • 菜单 Menu
  • 导航栏 Navbar
  • 分页 Pagination
  • 步骤 Steps
  • 选项卡 Tabs
  • 提示 Alert
  • 结果页 Result
  • 空状态 Empty
  • 加载 Loading
  • 全局提示 Message
  • 进度条 Progress
  • 环形进度 Radial Progress
  • 骨架屏 Skeleton
  • 通知提醒框 Notification
  • 轻提示 Toast
  • 气泡确认框 Popconfirm
  • 气泡卡片 Popover
  • 工具提示 Tooltip
  • 日历 Calendar
  • 颜色选择器 ColorPicker
  • 复选框 Checkbox
  • 字段集 Fieldset
  • 表单 Form
  • 文件输入 File Input
  • 筛选器 Filter
  • 标签 Label
  • 单选框 Radio
  • 范围选择 Range
  • 评分 Rating
  • 分段选择 Segmented
  • 自动完成 AutoComplete
  • 选择器 Select
  • 树选择 TreeSelect
  • 树控件 Tree
  • 提及输入 Mentions
  • 穿梭框 Transfer
  • 漫游引导 Tour
  • 输入框 Input
  • 数字输入 InputNumber
  • 文本域 Textarea
  • 开关 Toggle
  • 校验器 Validator
  • 分隔线 Divider
  • 弹性布局 Flex
  • 分割面板 Splitter
  • 抽屉侧边栏 Drawer
  • 页脚 Footer
  • 栅格 Grid
  • 瀑布流 Masonry
  • 布局 Layout
  • 主视觉区 Hero
  • 指示器 Indicator
  • 组合项 Join
  • 蒙版 Mask
  • 水印 Watermark
  • 间距 Space
  • 堆叠 Stack
  • 浏览器样机 Mockup Browser
  • 代码样机 Mockup Code
  • 手机样机 Mockup Phone
  • 窗口样机 Mockup Window
目录统计
总条目
  • 按钮 Button
  • 排版 Typography
  • 时间选择器 TimePicker
  • 下拉菜单 Dropdown
  • 悬浮操作按钮 FAB
  • 模态框 Modal
  • 切换 Swap
  • 主题控制器 Theme Controller
  • 手风琴 Accordion
  • 头像 Avatar
  • 徽标 Badge
  • 卡片 Card
  • 轮播 Carousel
  • 聊天气泡 Chat
  • 折叠面板 Collapse
  • 倒计时 Countdown
  • 描述列表 Descriptions
  • 对比 Diff
  • 二维码 QRCode
  • 悬浮 3D 卡片 Hover 3D
  • 悬浮画廊 Hover Gallery
  • 键盘提示 Kbd
  • 列表 List
  • 统计 Stat
  • 状态 Status
  • 表格 Table
  • 文本轮播 Text Rotate
  • 时间线 Timeline
  • 锚点 Anchor
  • 固钉 Affix
  • 面包屑 Breadcrumbs
  • 底部导航 Dock
  • 链接 Link
  • 菜单 Menu
  • 导航栏 Navbar
  • 分页 Pagination
  • 步骤 Steps
  • 选项卡 Tabs
  • 提示 Alert
  • 结果页 Result
  • 空状态 Empty
  • 加载 Loading
  • 全局提示 Message
  • 进度条 Progress
  • 环形进度 Radial Progress
  • 骨架屏 Skeleton
  • 通知提醒框 Notification
  • 轻提示 Toast
  • 气泡确认框 Popconfirm
  • 气泡卡片 Popover
  • 工具提示 Tooltip
  • 日历 Calendar
  • 颜色选择器 ColorPicker
  • 复选框 Checkbox
  • 字段集 Fieldset
  • 表单 Form
  • 文件输入 File Input
  • 筛选器 Filter
  • 标签 Label
  • 单选框 Radio
  • 范围选择 Range
  • 评分 Rating
  • 分段选择 Segmented
  • 自动完成 AutoComplete
  • 选择器 Select
  • 树选择 TreeSelect
  • 树控件 Tree
  • 提及输入 Mentions
  • 穿梭框 Transfer
  • 漫游引导 Tour
  • 输入框 Input
  • 数字输入 InputNumber
  • 文本域 Textarea
  • 开关 Toggle
  • 校验器 Validator
  • 分隔线 Divider
  • 弹性布局 Flex
  • 分割面板 Splitter
  • 抽屉侧边栏 Drawer
  • 页脚 Footer
  • 栅格 Grid
  • 瀑布流 Masonry
  • 布局 Layout
  • 主视觉区 Hero
  • 指示器 Indicator
  • 组合项 Join
  • 蒙版 Mask
  • 水印 Watermark
  • 间距 Space
  • 堆叠 Stack
  • 浏览器样机 Mockup Browser
  • 代码样机 Mockup Code
  • 手机样机 Mockup Phone
  • 窗口样机 Mockup Window

Calendar 日历

Calendar 现在同时覆盖 Rue 原生月历面板、事项渲染、卡片式日历,以及 Cally、Pikaday 两条基础接入链路。

Native Panel

Month / Year 两种面板

新增默认 Calendar 面板,支持 value、mode、validRange、showWeek 与 headerRender。

Render Hooks

细胞级渲染能力

cellRender 和 fullCellRender 可以把普通日期格组织为事项列表、容量卡或数据看板。

Composition Ready

基础场景完整覆盖

Calendar.Cally、Calendar.Month、Calendar.PikaSingle 仍然可用,基础接入方式不需要拆。

# Basic calendar

默认面板,覆盖受控日期、范围限制、禁用规则与周序号。

Rue Calendar
2026年4月
7月8日星期三
月视图
周
周
周一
周二
周三
周四
周五
周六
周日
14
15
16
17
18
19
当前值
2026-04-12
选择来源
date
面板状态
2026年4月 / 月视图

日期范围被限制在 2026 年 4 至 5 月之间,适合产品排期、门店值班或发布窗口场景。

# Notice calendar

使用 cellRender 在日期格展示事项,在年视图展示月份 backlog。

Preview

事项日历会在页面显示后自动初始化,不再需要手动点击加载。

# Card mode

缩成仪表盘卡片,再用 fullCellRender 为少量日期挂上负载进度。

Preview

卡片模式会在后台分帧挂载,避免首屏一次性把多个重预览一起算完。

# Custom header

接管顶部工具条,自定义模式切换、年份与月份选择器。

Preview

自定义头部示例会在页面稳定后自动挂载,减少首屏阻塞。

# Cally calendar example

基础的 Cally web component 日历壳层仍然原样可用。

Preview

Cally 预览会延后挂载,避免阻塞第一个日历示例。

# Cally date picker example

基础的日期输入弹层示例 展示,只把交互说明和布局重新编排。

Preview

日期输入弹层会延后挂载,页面主体优先完成交互。

# Pikaday input example

展示基础 pika-single 输入壳层,让第三方实例继续挂载在 Rue 组件树里。

Preview

Pikaday 第三方实例会延后初始化,避免拖慢首屏。

API

默认 Calendar 面板聚焦于日历组件常见的核心交互能力,同时使用 Rue 自己的视觉和基础导出方式。

属性说明类型默认值
cellRender按日期格或月份格补充内容,适合放日程列表、状态徽标等轻量信息(date: Date, info) => any-
defaultValue非受控模式下的初始日期Date | string | numbernew Date()
disabledDate禁用特定日期;会同时影响日期格、月份导航与年份导航(date: Date) => boolean-
fullscreen切换为大面板或卡片模式booleantrue
fullCellRender完全接管单元格内容,适合 KPI、容量卡片等更强视觉定制(date: Date, info) => any-
headerRender自定义头部,拿到年/月选项与模式切换方法(config) => any-
mode视图模式,可在月视图与年视图之间切换'month' | 'year''month'
onRenderProfile渲染诊断回调,报告当前更新阶段、耗时、cellRender 调用次数与慢单元格(event: CalendarRenderProfileEvent) => void-
renderProfileThreshold渲染诊断的慢调用阈值,超过后会在 onRenderProfile 中标记 slownumber16
showWeek月视图下显示 ISO 周序号,适合排班和周计划看板booleanfalse
validRange限定可浏览与可选择的日期范围[Date | string | number, Date | string | number]-
value受控日期;通常与 onChange、onPanelChange 搭配Date | string | number-
weekStartsOn自定义周起始日,0 表示周日,1 表示周一0 | 1 | 2 | 3 | 4 | 5 | 61

附属导出

基础的 Cally 与 Pikaday 接口没有删除,而是并列保持为复合导出,便于按需接入。

导出说明
Calendar.Cally展示基础 Cally web component 容器,适合需要 slot 导航的原生体验
Calendar.MonthCally 的月份节点,和 Calendar.Cally 组合使用
Calendar.PikaSinglePikaday 输入框样式包装,仍可按原方式挂载第三方实例
页内导航
页内导航
文档
  • 深度指南
  • 实战例子
  • 快速上手
  • 术语表
  • 错误码参照表
关于
  • 常见问题
  • 团队
  • 版本发布
  • 社区指南
生态
  • 插件
  • 组件库
  • 路由指南
  • Text.js
© 2024-2026 Xiangmin Liu
Rue.JS