Reactで、GitHubのような草のカレンダーを作る方法

const DAY = 24 * 60 * 60 * 1000;

// 'YYYY-MM-DD' を、1970-01-01 から数えた日数にする（タイムゾーンの影響を受けない）
export function toDay(date: string): number {
  const [y, m, d] = date.split('-').map(Number);
  return Date.UTC(y, m - 1, d) / DAY;
}

// 日数から 'YYYY-MM-DD' に戻す
export function toDateString(day: number): string {
  return new Date(day * DAY).toISOString().slice(0, 10);
}

// 日数から月・日・曜日（0 が日曜）を取り出す
export function dayParts(day: number) {
  const dt = new Date(day * DAY);
  return { month: dt.getUTCMonth() + 1, date: dt.getUTCDate(), weekday: dt.getUTCDay() };
}

const firstSunday = first - dayParts(first).weekday;
const columnOf = (day: number) => Math.floor((day - firstSunday) / 7) + 2;

1月1日 → grid-column 2 / grid-row 6 / level 2
1月3日 → grid-column 2 / grid-row 8 / level 2
1月4日 → grid-column 3 / grid-row 2 / level 4
3月1日 → grid-column 11 / grid-row 2 / level 0
12月31日 → grid-column 54 / grid-row 6 / level 0

Asia/Tokyo 1月1日（木）4件 grid-row 6 / new Date('2026-01-01').getDay()=4 getDate()=1
America/New_York 1月1日（木）4件 grid-row 6 / new Date('2026-01-01').getDay()=3 getDate()=31
Pacific/Honolulu 1月1日（木）4件 grid-row 6 / new Date('2026-01-01').getDay()=3 getDate()=31

// 件数を 0〜4 の5段階にする。0件は 0、それ以外は最大値に対する割合で 1〜4 に分ける
export function levelOf(count: number, max: number): number {
  if (count <= 0 || max <= 0) return 0;
  return Math.min(4, Math.ceil((count / max) * 4));
}

件数→段階: 0件→0 1件→1 2件→1 3件→2 4件→2 5件→2 6件→3 7件→3 8件→3 9件→4 10件→4 11件→4

.cell {
  width: var(--cell);
  height: var(--cell);
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: #ebedf0;
}
.cell[data-level='1'] { background: #9be9a8; }
.cell[data-level='2'] { background: #40c463; }
.cell[data-level='3'] { background: #30a14e; }
.cell[data-level='4'] { background: #216e39; }
.cell[aria-checked='true'] { outline: 2px solid #1f2a30; outline-offset: 1px; }
.cell:focus-visible { outline: 2px solid #00c8e8; outline-offset: 1px; }

import { useLayoutEffect, useRef } from 'react';
import type { CSSProperties, KeyboardEvent } from 'react';
import { dayParts, toDateString, toDay } from './dates';
import { levelOf } from './level';

type Props = {
  counts: Record<string, number>; // 'YYYY-MM-DD' → 件数
  start: string;
  end: string;
  selected: string | null;
  onSelect: (date: string) => void;
};

const WEEKDAYS = ['日', '月', '火', '水', '木', '金', '土'];
// 矢印キーで動く日数。上下は1日、左右は1週
const STEPS: Record<string, number> = { ArrowUp: -1, ArrowDown: 1, ArrowLeft: -7, ArrowRight: 7 };

export function Heatmap({ counts, start, end, selected, onSelect }: Props) {
  const first = toDay(start);
  const last = toDay(end);
  // 1列目（左端の週）の日曜日。start が週の途中でも、列はかならず日曜から始める
  const firstSunday = first - dayParts(first).weekday;
  // その日が何列目か（1列目は曜日の見出しなので、週の列は 2 から）
  const columnOf = (day: number) => Math.floor((day - firstSunday) / 7) + 2;
  const weeks = columnOf(last) - 1;

  const days = Array.from({ length: last - first + 1 }, (_, i) => first + i);
  const max = Math.max(0, ...days.map((d) => counts[toDateString(d)] ?? 0));
  // 月の見出しは、範囲の最初の日と、各月の1日がある週の上に置く
  const months = days
    .filter((d) => d === first || dayParts(d).date === 1)
    .map((d) => ({ day: d, month: dayParts(d).month }));

  const scrollRef = useRef<HTMLDivElement>(null);
  const cellRefs = useRef(new Map<number, HTMLButtonElement>());

  // 最初の表示で、いちばん新しい週（右端）が見えるようにする
  useLayoutEffect(() => {
    const el = scrollRef.current;
    if (el) el.scrollLeft = el.scrollWidth;
  }, []);

  const move = (e: KeyboardEvent, day: number) => {
    const step = STEPS[e.key];
    if (step === undefined) return;
    e.preventDefault();
    const next = Math.min(last, Math.max(first, day + step));
    onSelect(toDateString(next));
    cellRefs.current.get(next)?.focus();
  };

  const grid: CSSProperties = {
    // 1列目は曜日、2列目からが1週ずつの列。1行目は月の見出し、2〜8行目が日〜土
    gridTemplateColumns: `2em repeat(${weeks}, var(--cell))`,
    gridTemplateRows: `auto repeat(7, var(--cell))`,
  };
  // キーボードで最初に入るマス：選んだ日、なければ最後の日
  const focusDay = selected ? toDay(selected) : last;

  return (
    <div className="heatmap-scroll" ref={scrollRef}>
      {/* 1日だけを選ぶ部品なので、全体を radiogroup、マスを radio にする */}
      <div className="heatmap" style={grid} role="radiogroup" aria-label={`${start}〜${end}の件数`}>
        {/* 曜日の列。月の見出しの行から一番下の行までを1つの箱にして、横スクロールでも左に残す */}
        <div className="weekdays">
          {[1, 3, 5].map((w) => (
            <span key={w} style={{ gridRow: w + 2 }}>
              {WEEKDAYS[w]}
            </span>
          ))}
        </div>
        {months.map(({ day, month }) => (
          <span key={day} className="month" style={{ gridColumn: columnOf(day), gridRow: 1 }}>
            {month}月
          </span>
        ))}
        {days.map((day) => {
          const { month, date, weekday } = dayParts(day);
          const key = toDateString(day);
          const count = counts[key] ?? 0;
          return (
            <button
              key={key}
              ref={(el) => {
                if (el) cellRefs.current.set(day, el);
                else cellRefs.current.delete(day);
              }}
              type="button"
              role="radio"
              className="cell"
              data-level={levelOf(count, max)}
              aria-label={`${month}月${date}日（${WEEKDAYS[weekday]}）${count}件`}
              aria-checked={selected === key}
              tabIndex={day === focusDay ? 0 : -1}
              style={{ gridColumn: columnOf(day), gridRow: weekday + 2 }}
              onClick={() => onSelect(key)}
              onKeyDown={(e) => move(e, day)}
            />
          );
        })}
      </div>
    </div>
  );
}

const [selected, setSelected] = useState<string | null>(null);
// ...
<Heatmap counts={counts} start={START} end={END} selected={selected} onSelect={setSelected} />

幅390px: {"scrollLeft":406,"scrollWidth":764,"clientWidth":358,"pageScrollWidth":390,"visibleMonths":"8月 9月 10月 11月 12月"}

.heatmap-scroll { overflow-x: auto; }
.heatmap {
  display: grid;
  gap: 3px;
  width: max-content;
  font-size: 11px;
}
.month { white-space: nowrap; }
.weekdays {
  grid-column: 1;
  grid-row: 1 / -1;
  display: grid;
  /* 行の高さと間隔は、外側のグリッドのものをそのまま使う */
  grid-template-rows: subgrid;
  line-height: var(--cell);
  /* 横にスクロールしても、曜日の列は左端に残す */
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
  /* 曜日の列と最初の週のあいだの隙間（gap）も白でふさぐ */
  box-shadow: 3px 0 #fff;
}

ArrowDown → 3月5日（木）：0件 / focus: 3月5日（木）0件
ArrowRight → 3月12日（木）：4件 / focus: 3月12日（木）4件
ArrowUp → 3月11日（水）：8件 / focus: 3月11日（水）8件
ArrowLeft → 3月4日（水）：2件 / focus: 3月4日（水）2件
ArrowLeft → 2月25日（水）：4件 / focus: 2月25日（水）4件