opinion
CalendarHeatmap
One small cell per day, shaded by that day's value.
Tasks finished per day3 Aug to 25 Oct, the whole studio
In context
Person profileA crew member's last twelve weeks
MCOnline
Maya Chen
Design
Month rows
Mass attendanceOne row per month; press a week to select it
Mass attendance
Oct 2025
Nov 2025
Dec 2025
Jan 2026
Feb 2026
Mar 2026
Apr 2026
May 2026
Jun 2026
Jul 2026
Aug 2026
Sep 2026
Attended Mass No record
Week of 23 Mar, attended Mass
Oct 2025
Nov 2025
Attended Mass No record
Oct 2025
Nov 2025
Props
| Prop | Type | Required | Default |
|---|---|---|---|
data | CalendarHeatmapCell[] | undefined | No | [] |
startDate | string | undefined | No | — |
endDate | string | undefined | No | — |
title | string | undefined | No | — |
ariaLabel | string | undefined | No | — |
cellSize | number | undefined | No | 12 |
cellShape | "circle" | "square" | "hexagon" | undefined | No | square |
layout | "grid" | "month-rows" | undefined | No | grid |
cells | CalendarHeatmapWeekCell[] | undefined | No | — |
groupBy | "month" | "none" | undefined | No | month |
legend | { on: ReactNode; off: ReactNode; } | undefined | No | — |
onCellPress | ((cell: CalendarHeatmapWeekCell) => void) | undefined | No | — |
selected | string | undefined | No | — |
loading | boolean | undefined | No | — |
colorScale | ((normalizedValue: number) => string) | undefined | No | (normalizedValue: number): string => { const t = Math.max(0, Math.min(1, normalizedValue)); const percent = Math.round(8 + t * 92); return "color-mix(in srgb, var(--rebar-color-primary, #0066cc) " + percent + "%, transparent)"; } |
bionic | boolean | undefined | No | — |
bionicOptions | BionicOptions | undefined | No | — |
data-rebar-* attributes
data-rebar-component="calendar-heatmap" on the root <figure>; data-rebar-part="cell" on a real day, "cell-missing" on a day absent from data.
Migrating to Ant Design
Not codemod-covered — AntD ships no chart components of its own; a migration typically maps directly to whatever charting library's own calendar-heatmap chart the target project uses.