# Calendar Heatmap

> Year-grid heatmap — the classic GitHub contributions layout.

Source: https://ngwr.dev/reference/components/calendar-heatmap  
Kind: Component

## Installation

```angular-ts
import { WrCalendarHeatmap, type WrHeatmapDatum } from 'ngwr/calendar-heatmap';

@Component({ imports: [WrCalendarHeatmap] })
export class MyComponent {
  // Each cell: { date, value }. Higher value → darker shade.
  protected readonly contributions: WrHeatmapDatum[] = [
    { date: new Date('2026-01-15'), value: 3 },
    { date: new Date('2026-02-04'), value: 8 },
    { date: new Date('2026-03-22'), value: 5 },
    // ... one entry per active day
  ];
}
```

## Basic

```angular-html
<wr-calendar-heatmap [data]="contributions" />
```

## API

Inputs of \<wr-calendar-heatmap>.

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `data` | — | `readonly WrHeatmapDatum[]` | `[]` |
| `ariaLabel` | Accessible name of the whole grid. Its cells are bare spans whose `title` a screen reader on a role-less element does not read, so the map used to be several hundred anonymous nodes with no name. Falls back to `calendarHeatmap.label`. | `string \| null` | `null` |
| `endDate` | Last day to render. | `string \| Date \| null` | `today` |
| `weeks` | Number of weeks (columns) to render. | `number` | `53` |
| `cellSize` | Cell side in CSS pixels. | `number` | `11` |
| `cellGap` | Pixel gap between cells. | `number` | `2` |
| `color` | Cell fill colour at full intensity. | `string` | `primary` |
| `emptyColor` | Background colour for zero-value days. | `string` | `light tint` |
| `showLabels` | Show the weekday + month labels around the grid. | `boolean` | `true` |

## Types

Data shapes used by the inputs above.

```angular-ts
interface WrHeatmapDatum {
  date: string | Date;
  value: number;
}
```

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `WrHeatmapDatum` | One contribution cell. | `interface` | — |
| `date`required | ISO date string (YYYY-MM-DD) or Date. | `string \| Date` | — |
| `value`required | Magnitude — bucketed into intensity steps. | `number` | — |