Heat Calendar
在紧凑日历网格中展示每日活动，检查时可读取精确数值。
适用场景
- 当界面需要以下行为时使用 Heat Calendar：在紧凑日历网格中展示每日活动，检查时可读取精确数值。
安装
选择安装方式，用法示例将同步更新导入路径。
首次使用时，将安装的 src/components/orvui/styles.css 导入项目样式入口。
示例
预览
<script setup lang="ts">
import { HeatCalendar } from "@/components/orvui/charts/heat-calendar";
const values = Array.from({ length: 16 }, (_, week) =>
Array.from({ length: 7 }, (_, day) => {
const noise = Math.sin(week * 12.9898 + day * 78.233) * 43758.5453;
const intensity = noise - Math.floor(noise);
return day >= 5 ? Math.max(0, intensity - 0.55) * 1.4 : intensity;
}),
);
const end = new Date("2026-10-25T00:00:00Z");
</script>
<template>
<HeatCalendar
unit="commits"
:weeks="16"
:max-count="14"
:values="values"
:end-date="end"
/>
</template>
状态与事件
需要由表单、路由或父组件管理时，绑定下列状态并接收对应更新。v-model 是属性与 update 事件的简写；值的类型应与 API 一致。
| 组件 | Vue 绑定 | 更新事件 |
|---|---|---|
HeatCalendar | v-model:selectionnull | HeatCalendarSelection | update:selection |
可选受控属性未传入时，按组件文档的默认行为工作；不要用固定的 false 或空值代替未传入。异步请求和持久化在应用中处理，再把结果传回组件。
API 参考
HeatCalendar
unit?stringNoun after every count, e.g. "commits", "ships".
"commits"weeks?numberNumber of week columns.
16maxCount?numberCount a cell at intensity 1 stands for; a cell reads `intensity × maxCount`.
14values?number[][]`values[week][day]` intensities in 0..1, seven days per week. Missing values are zero.
—endDate?DateLast UTC calendar day of the grid. Defaults to today after mount; explicit dates render identically in every timezone.
—color?stringThe single hue. Any CSS color; magnitude maps to its strength, never to a second color.
"var(--accent)"className?string—selection?null | HeatCalendarSelectionControlled selection; null clears it. Cell coordinates are zero-based week/day (Monday first).
—defaultSelection?null | HeatCalendarSelectionnullonSelectionChange?(selection: HeatCalendarSelection | null) => void—事件
update:selection—@update:selectionselectionChange—@selectionChange插槽
default() => VNodeChild#defaultHeatCalendarGrid
插槽
default() => VNodeChild#defaultHeatCalendarTooltip
插槽
default—作用域参数: tooltip
#default无障碍
为交互控件提供明确的无障碍名称。保留文档中的键盘路径、可见焦点与减少动态效果状态；自定义插槽应继续保留所替代部件的语义。
常见问题
- 如何配置 Heat Calendar？
- 通过 unit、weeks、maxCount、values、endDate、color、className、selection、defaultSelection、onSelectionChange 配置 Heat Calendar；API 表列出其类型与默认值。
- 如何连接到应用状态？
- 监听 update:selection、selectionChange，将组件连接到应用状态。
- 可以在服务端渲染吗？
- 可以在 Vue SSR 应用中正常渲染。服务端与客户端的初始 props 应保持一致；浏览器测量与交互资源在挂载后启动。
更新于