When to use it
Use Gregorian date-only identities and an inclusive range of at most 3660 days. Missing days stay distinct from zero.
Data displayReact Native
Calendar heatmap
Shows daily activity with explicit missing dates and a numeric intensity legend.
Native example
Use Calendar heatmap
Use Gregorian date-only identities and an inclusive range of at most 3660 days. Missing days stay distinct from zero.
View captured React Native example
<LumenCalendarHeatmap label="Daily activity" startDate="2026-08-01" endDate="2026-08-28" data={[{ date: "2026-08-01", value: 3 }]} />Reference
Public API
The primary shared and platform-specific options exposed by LumenCalendarHeatmap.
| API | Values or type | Default | Description |
|---|---|---|---|
| data | LumenCalendarHeatmapDatum[] | Required | Date-only identity and nullable finite value. |
| startDate, endDate | YYYY-MM-DD | Required | Inclusive range. Duplicate, invalid or out-of-range dates fail closed. |
| weekStartsOn | 0 or 1 | 0 | Sunday or Monday. weekdayLabels is always Sunday-indexed. |
| formatDate, labels | Localized formatters and labels | Platform defaults | Formats dates and exact measurements consistently. |
| showData | Boolean | true | Provides the visible expandable exact values. |
Native behavior
Design and accessibility
Accessibility
Retains exact date and value facts, including when the visible data list is hidden.
Shared component