内嵌日历

一直显示在页面里的月历（不是弹出的选择器）：点选一天、键盘切换、月年快速跳转，可禁用日期，还能给某些天加小圆点或热力底色（如日程、签到）。

带行为分包 modular/date 1 个事件 3 个方法

示例

代码

<div id="cal-demo" style="max-width:22rem"></div>
<script>
  var cal = ZhaoUI.calendar('#cal-demo', {
    value: new Date(),
    disabledDate: function (d) { return d.getDay() === 0 ? '周日休息' : ''; },
    marks: function (d) { return d.getDate() % 5 === 0 ? { dots: [1, 3], label: '2 项日程' } : null; }
  });
</script>

只用核心包（modular/core）时，还要加 modular/date.min.js 和 modular/date.min.css；全量版已包含。见按需引入。

属性

属性	用在	取值	说明
`data-zh-calendar`	<div>		声明为内嵌日历
`data-value`	<div>	YYYY-MM-DD	默认选中的日期，也决定初始显示的月份
`data-min / data-max`	<div>	YYYY-MM-DD	可选范围
`data-disable-weekends`	<div>		周末不可选
`data-disabled-dates`	<div>	逗号分隔的日期	指定不可选的日期

事件

事件	触发于	detail	说明
`zh:calendar-change`	<div>	undefined	选中了某一天

方法

ZhaoUI.calendar(host, config)：命令式创建。config：value、min、max、disabledDate(d)（返回原因文字即禁用，返回空则可选）、marks(d)
marks(d)：返回 null，或 { dots: [1 到 8], label }（最多 3 个小圆点，数字是图表色序号）或 { heat: 1 到 3, label }（热力底色深浅）；label 会写进该日的无障碍名称
host.zhCalendar.get() / set(v) / refresh()：读取选中日期、设置选中日期（字符串或 Date）、数据变化后重画标记

样式类

zh-dp-inline

日期网格是 role=grid，方向键移动，PageUp/PageDown 换月，Enter 选中
每个日期按钮的名称包含完整日期和你给的 label，如“10 月 4 日星期五，2 项日程”
标记不要只靠颜色：label 里要写出含义
本组件需要日期时间模块（modular/date.js），完整版 zhaoui.js 已包含

常见问题

内嵌日历是什么？

怎么使用内嵌日历？

先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写；需要用代码控制时，用「方法」里列出的接口。

内嵌日历有哪些事件？

zh:calendar-change（选中了某一天）。

内嵌日历有哪些方法？

ZhaoUI.calendar(host, config)：命令式创建。config：value、min、max、disabledDate(d)（返回原因文字即禁用，返回空则可选）、marks(d)；marks(d)：返回 null，或 { dots: [1 到 8], label }（最多 3 个小圆点，数字是图表色序号）或 { heat: 1 到 3, label }（热力底色深浅）；label 会写进该日的无障碍名称；host.zhCalendar.get() / set(v) / refresh()：读取选中日期、设置选中日期（字符串或 Date）、数据变化后重画标记。

内嵌日历支持键盘和读屏吗？

日期网格是 role=grid，方向键移动，PageUp/PageDown 换月，Enter 选中；每个日期按钮的名称包含完整日期和你给的 label，如“10 月 4 日星期五，2 项日程”；标记不要只靠颜色：label 里要写出含义。

内嵌日历需要依赖框架吗？

不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。