# 달력 히트맵

> 날마다의 값을 주 단위 격자로: 학습·출석·커밋 잔디.

Source: https://82chart.com/docs/calendar/

달력 히트맵이란 하루를 한 칸으로 놓고 주마다 줄을 바꿔 그린 히트맵으로, 날마다의 값(학습 시간, 출석, 커밋 수)을 색의 진하기로 보여 줍니다. GitHub의 "잔디"가 대표적인 예입니다.

`type: 'calendar'` 는 `[날짜, 값]` 짝(또는 날짜 `labels` + 숫자)을 받아 한 주를 한 열로, 요일을 줄(월~일)로 그립니다. 위에는 달 이름(`4월`, `5월`…), 왼쪽에는 요일, 아래에는 색 범례가 붙습니다. 데이터가 없는 날도 범위 안이면 빈 칸으로 그립니다.

```js
createChart('#chart', {
  type: 'calendar',
  title: '2026년 학습 기록',
  unit: '분',
  timeZone: 'Asia/Seoul',
  data: {
    series: [{
      name: '학습',
      data: Array.from({ length: 150 }, (_, i) => [new Date(Date.UTC(2026, 4, 1 + i)).toISOString().slice(0, 10), i % 9 === 0 ? 0 : 15 + ((i * 53) % 70)]),
    }],
  },
});
```

- 날짜 문자열(`'2026-10-21'`)은 그 시간대의 그날입니다. `Date` 값은 `timeZone` 으로 날짜를 정하므로 UTC 서버에서 `renderToSVG` 해도 하루 밀리지 않습니다.
- 한 주는 월요일부터 시작합니다. 일요일부터 시작하려면 `heatmap: { weekStart: 0 }`.
- 키보드: 좌·우 화살표는 한 주씩, 위·아래 화살표는 하루씩 옮깁니다. 툴팁에는 `2026.10.21(수)` 처럼 날짜와 요일이 나옵니다.
- 색은 히트맵과 같은 순차 색입니다(`heatmap.min`, `max`, `color`, `legend`).

## 자주 묻는 질문

### 주가 일요일부터 시작하게 하려면?

기본은 월요일 시작이고, `heatmap: { weekStart: 0 }` 이면 일요일부터입니다.

### 서버에서 그리면 날짜가 하루 밀려요.

서버는 대부분 UTC라서 그렇습니다. `timeZone: 'Asia/Seoul'` 을 주면 `renderToSVG` 로 그려도 브라우저와 같은 날짜에 칸이 놓입니다.