---
title: "CalendarHeatmap"
description: "A long period as a calendar: one cell per day, deeper where the day counted more, with weeks starting on the reader’s first day."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# CalendarHeatmap

## A quarter of conversations

```tsx
import { CalendarHeatmap, ChartPanel } from '@arbol-ai/ui/charts';
import type { HeatmapDay } from '@arbol-ai/ui/charts';

const QUARTER: HeatmapDay[] = Array.from({ length: 91 }, (_, index) => {
  const date = new Date(2026, 7, 9 + index);
  const isWeekend = date.getDay() === 0 || date.getDay() === 6;
  return { date, value: isWeekend ? (index % 5) * 3 : 40 + ((index * 17) % 37) };
});

<ChartPanel eyebrow="Last 13 weeks" title="Conversations per day">
  <CalendarHeatmap aria-label="Conversations per day, last 13 weeks" data={QUARTER} />
</ChartPanel>
```

## Source

The examples above are [`src/charts/calendar-heatmap.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/charts/calendar-heatmap.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/charts/calendar-heatmap/index.mdx