Reactで、月ごとのカレンダーを表示する方法

export type Day = { date: Date; inMonth: boolean };

// month は 0 始まり（1月が 0）。weekStartsOn は週の始まりの曜日（0 が日曜、1 が月曜）
export function monthGrid(year: number, month: number, weekStartsOn = 0): Day[][] {
  // 1日の前に、前の月の日が何日入るか
  const offset = (new Date(year, month, 1).getDay() - weekStartsOn + 7) % 7;
  const weeks: Day[][] = [];
  // 行の数は 6 に固定する（月によって表の高さが変わらないように）
  for (let w = 0; w < 6; w++) {
    const week: Day[] = [];
    for (let d = 0; d < 7; d++) {
      // 0日や32日のような日も渡してよい。Date が隣の月の日に直してくれる
      const date = new Date(year, month, 1 - offset + w * 7 + d);
      week.push({ date, inMonth: date.getMonth() === month });
    }
    weeks.push(week);
  }
  return weeks;
}

export const addDays = (date: Date, days: number) =>
  new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);

export const sameDay = (a: Date, b: Date) =>
  a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();

--- 2026年10月（日曜始まり。* は隣の月の日）
27* 28* 29* 30*  1   2   3 
 4   5   6   7   8   9  10 
11  12  13  14  15  16  17 
18  19  20  21  22  23  24 
25  26  27  28  29  30  31 
 1*  2*  3*  4*  5*  6*  7*
--- 2026年10月（月曜始まり）
28* 29* 30*  1   2   3   4 
 5   6   7   8   9  10  11 
12  13  14  15  16  17  18 
19  20  21  22  23  24  25 
26  27  28  29  30  31   1*
 2*  3*  4*  5*  6*  7*  8*

1月: 1日は木曜、最終日は31日、5行
2月: 1日は日曜、最終日は28日、4行
3月: 1日は日曜、最終日は31日、5行
4月: 1日は水曜、最終日は30日、5行
5月: 1日は金曜、最終日は31日、6行
6月: 1日は月曜、最終日は30日、5行
7月: 1日は水曜、最終日は31日、5行
8月: 1日は土曜、最終日は31日、6行
9月: 1日は火曜、最終日は30日、5行
10月: 1日は木曜、最終日は31日、5行
11月: 1日は日曜、最終日は30日、5行
12月: 1日は火曜、最終日は31日、5行

次の月: 2026年11月 / 行=6 高さ=317px / Tab で入れる日 2026年11月1日日曜日
次の月: 2026年12月 / 行=6 高さ=317px / Tab で入れる日 2026年12月1日火曜日
次の月: 2027年1月 / 行=6 高さ=317px / Tab で入れる日 2027年1月1日金曜日

new Date(2026, 12, 1) = 2027-1-1 00:00
new Date(2026, -1, 1) = 2025-12-1 00:00
new Date(2026, 2, 0) = 2026-2-28 00:00
new Date(2028, 2, 0) = 2028-2-29 00:00

--- 2026年11月1日の 0時から、1日ずつ進める
1日後: ミリ秒で足す 2026-11-1 23:00 / addDays 2026-11-2 00:00
2日後: ミリ秒で足す 2026-11-2 23:00 / addDays 2026-11-3 00:00

import { useEffect, useId, useRef, useState, type KeyboardEvent } from 'react';
import { addDays, monthGrid, sameDay } from './calendar';

const titleFormat = new Intl.DateTimeFormat('ja-JP', { year: 'numeric', month: 'long' });
const weekdayFormat = new Intl.DateTimeFormat('ja-JP', { weekday: 'short' });
const labelFormat = new Intl.DateTimeFormat('ja-JP', { dateStyle: 'full' });
const moves: Record<string, number> = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 };

type Props = {
  selected: Date | null;
  onSelect: (date: Date) => void;
  weekStartsOn?: 0 | 1;
};

export function MonthCalendar({ selected, onSelect, weekStartsOn = 0 }: Props) {
  const titleId = useId();
  const tableRef = useRef<HTMLTableElement>(null);
  const shouldFocus = useRef(false);
  const [today] = useState(() => new Date());
  const [view, setView] = useState(() => {
    const d = selected ?? today;
    return { year: d.getFullYear(), month: d.getMonth() };
  });
  // 矢印キーで動かす元になる日
  const [active, setActive] = useState(() => selected ?? today);

  const { year, month } = view;
  const weeks = monthGrid(year, month, weekStartsOn);
  const inView = (d: Date) => d.getFullYear() === year && d.getMonth() === month;
  // Tab キーで入れる日は1つだけ。表示中の月に active がなければ1日にする
  const focusable = inView(active) ? active : new Date(year, month, 1);

  const moveMonth = (diff: number) => {
    const d = new Date(year, month + diff, 1);
    setView({ year: d.getFullYear(), month: d.getMonth() });
  };

  const handleKeyDown = (e: KeyboardEvent) => {
    const days = moves[e.key];
    if (days === undefined) return;
    e.preventDefault();
    const next = addDays(focusable, days);
    setActive(next);
    setView({ year: next.getFullYear(), month: next.getMonth() });
    shouldFocus.current = true;
  };

  // 矢印キーで動かしたときだけ、描き直したあとの日にフォーカスを移す
  useEffect(() => {
    if (!shouldFocus.current) return;
    shouldFocus.current = false;
    tableRef.current?.querySelector<HTMLButtonElement>('button[tabindex="0"]')?.focus();
  });

  return (
    <div className="calendar">
      <div className="calendar-header">
        <button type="button" aria-label="前の月" onClick={() => moveMonth(-1)}>‹</button>
        <h2 id={titleId} aria-live="polite">{titleFormat.format(new Date(year, month, 1))}</h2>
        <button type="button" aria-label="次の月" onClick={() => moveMonth(1)}>›</button>
      </div>
      <table ref={tableRef} role="grid" aria-labelledby={titleId} onKeyDown={handleKeyDown}>
        <thead>
          <tr>
            {weeks[0].map(({ date }) => (
              <th key={date.getDay()} scope="col">{weekdayFormat.format(date)}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {weeks.map((week) => (
            <tr key={week[0].date.getTime()}>
              {week.map(({ date, inMonth }) => (
                <td key={date.getTime()} aria-selected={selected !== null && sameDay(date, selected) ? true : undefined}>
                  {inMonth ? (
                    <button
                      type="button"
                      tabIndex={sameDay(date, focusable) ? 0 : -1}
                      aria-label={labelFormat.format(date)}
                      aria-current={sameDay(date, today) ? 'date' : undefined}
                      onClick={() => {
                        setActive(date);
                        onSelect(date);
                      }}
                    >
                      {date.getDate()}
                    </button>
                  ) : (
                    // 隣の月の日は見せるだけ。読み上げからは外す
                    <span className="outside" aria-hidden="true">{date.getDate()}</span>
                  )}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

import { useState } from 'react';
import { MonthCalendar } from './MonthCalendar';

const format = new Intl.DateTimeFormat('ja-JP', { dateStyle: 'full' });

export function App() {
  const [selected, setSelected] = useState<Date | null>(null);
  return (
    <main>
      <MonthCalendar selected={selected} onSelect={setSelected} />
      <p className="selected">選んだ日：{selected ? format.format(selected) : 'まだありません'}</p>
    </main>
  );
}

.calendar td button[aria-current="date"] { box-shadow: inset 0 0 0 2px #00c8e8; font-weight: bold; }
.calendar td[aria-selected="true"] button { background: #00c8e8; color: #fff; }

- rowgroup:
  - row "日 月 火 水 木 金 土":
    - columnheader "日"
    - columnheader "月"
    - columnheader "火"
    - columnheader "水"
    - columnheader "木"
    - columnheader "金"
    - columnheader "土"
- row "2026年10月1日木曜日 2026年10月2日金曜日 2026年10月3日土曜日":
  - gridcell
  - gridcell
  - gridcell
  - gridcell
  - gridcell "2026年10月1日木曜日":
    - button "2026年10月1日木曜日": "1"
  - gridcell "2026年10月2日金曜日":
    - button "2026年10月2日金曜日": "2"
  - gridcell "2026年10月3日土曜日":
    - button "2026年10月3日土曜日": "3"

選んだ日：2026年11月3日火曜日
aria-selected="true" のセル: 1 個 / 2026年11月3日火曜日
フォーカス: 2026年11月3日火曜日 / Tab で入れる日: 2026年11月3日火曜日

Tab: フォーカス 前の月 / 見出し 2026年10月
Tab: フォーカス 次の月 / 見出し 2026年10月
Tab: フォーカス 2026年10月30日金曜日 / 見出し 2026年10月
ArrowRight: フォーカス 2026年10月31日土曜日 / 見出し 2026年10月
ArrowRight: フォーカス 2026年11月1日日曜日 / 見出し 2026年11月
ArrowUp: フォーカス 2026年10月25日日曜日 / 見出し 2026年10月
ArrowDown: フォーカス 2026年11月1日日曜日 / 見出し 2026年11月
ArrowLeft: フォーカス 2026年10月31日土曜日 / 見出し 2026年10月
Enter: フォーカス 2026年10月31日土曜日 / 見出し 2026年10月
選んだ日：2026年10月31日土曜日