캘린더 히트맵

날짜 칸 하나하나의 밀도를 주(열) × 요일(행) 격자로 보여 주는 표현 전용 차트입니다. 근태, 활동 로그, 예약 · 출석처럼 날짜마다 쌓이는 값에 씁니다. 색은 한 tone 의 불투명도 4단계이고 0 과 기록 없는 날은 빈 칸입니다. 날짜는 YYYY-MM-DD 문자열을 UTC 일로 다뤄 시간대에 따라 칸이 밀리지 않습니다. 기간이 길면 가로로 스크롤됩니다.

상태

8월9월10월월수금일

적음많음

월요일 시작

8월9월10월일화목토

적음많음

일요일 시작 · tone

활용 방법

20주 출석 기록

from · to 를 주지 않으면 data 의 처음 · 마지막 날로 기간을 잡는다. 칸에 마우스를 올리면 날짜와 값이 나온다.

Preview

5월6월7월8월9월10월월수금일

적음많음

tsx

<CalendarHeatmap
  data={[
    { date: "2026-05-23", value: 4 },
    { date: "2026-05-24", value: 1 },
    // ...
  ]}
  formatValue={(v) => `${v}명`}
/>

속성

이름	타입	기본값	설명
data	CalendarDatum[]	-	{ date: "YYYY-MM-DD", value }. 같은 날이 여럿이면 더한다
from · to	string	-	기간(YYYY-MM-DD, 끝날 포함). 없으면 data 의 처음 · 마지막 날
weekStart	"monday" \| "sunday"	"monday"	주 시작 요일(맨 위 행)
tone	ChartTone	"primary"	칸 색(불투명도 4단계)
cellSize	number	12	칸 한 변(px)
formatValue	(v: number) => string	ko-KR 콤마 + 건	값 포맷(title · 접근성 이름)