Components

Calendar Heatmap

A month of days shaded by their value, like spending per day.

S	M	T	W	T	F	S

September 12, 2026: $165 spent

Import

import { CalendarHeatmap } from '@rinzai/zen';

API reference

<CalendarHeatmap>

A month as a grid of days, each shaded by its value (e.g. what was spent that day): busy days stand out at a glance. Hover a day for its figure; with onSelect, days are buttons.

Prop	Type	Default
`locale`Required	`string`	`—`
`month`Required	`string`	`—`
`values`Required Each day's value, by date ("2026-09-03"); days missing have none.	`Partial<Record<string, number>>`	`—`
`className`	`string`	`—`
`format` Turns a value into text for its label, e.g. as money.	`((value: number) => string)`	`—`
`label` Accessible name (default: the month, e.g. "September 2026").	`string`	`—`
`onSelect` Makes the days buttons.	`((day: string) => void)`	`—`
`selected`	`string \| null`	`—`
`weekStartsOn` 0 for Sunday … 6 for Saturday (default: the locale's).	`number`	`weekStart(locale)`