# 内嵌日历

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

**依赖**：`zhaoui.css` 与 `zhaoui.js`（原生 HTML、CSS、JS，不需要框架或 jQuery）。只用核心包时，还要加 `modular/date.min.js` 和 `modular/date.min.css`；全量版已包含。

## 用法

```html
<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>
```

## 样式类

`zh-dp-inline`

## 属性

| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
| `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> | 逗号分隔的日期 | 指定不可选的日期 |

## 方法

- `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）、数据变化后重画标记

## 事件

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

## 无障碍

- 日期网格是 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。