Reactで、週ごとの予定を時間割のように表示する方法

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;
}

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

// その日を含む週の月曜日。日曜日は前の週の終わりとして扱う
export function mondayOf(day: number): number {
  const { weekday } = dayParts(day);
  return day - ((weekday + 6) % 7);
}

// 'HH:MM' を、0時からの分数にする
export function toMinutes(time: string): number {
  const [h, m] = time.split(':').map(Number);
  return h * 60 + m;
}

2026-11-02 → 週の月曜 11/2(月)
2026-11-04 → 週の月曜 11/2(月)
2026-11-08 → 週の月曜 11/2(月)
2026-11-09 → 週の月曜 11/9(月)
2026-03-08 → 週の月曜 3/2(月)
2026-11-01 → 週の月曜 10/26(月)
2026-11-08 → 曜日の番号を引いて1を足すと 11/9(月)

import type { CSSProperties } from 'react';
import { assignLanes } from './lanes';
import { dayParts, toDay, toMinutes } from './week';

export type Plan = { id: string; title: string; date: string; start: string; end: string };

type Props = {
  events: Plan[];
  weekStart: number; // 週の月曜日（toDay の値）
  today: number;
  from?: number; // 表に出す最初の時刻（分）
  to?: number; // 表に出す最後の時刻（分）
};

const STEP = 5; // 1行 = 5分
const WEEKDAYS = ['日', '月', '火', '水', '木', '金', '土'];
const hhmm = (min: number) => `${Math.floor(min / 60)}:${String(min % 60).padStart(2, '0')}`;

export function Timetable({ events, weekStart, today, from = 8 * 60, to = 20 * 60 }: Props) {
  const days = Array.from({ length: 7 }, (_, i) => weekStart + i);
  const hours = Array.from({ length: (to - from) / 60 }, (_, i) => from + i * 60);
  // 時刻（分）を、グリッドの行の線の番号にする。1行目は曜日の見出し
  const line = (min: number) => (min - from) / STEP + 2;

  const grid: CSSProperties = {
    gridTemplateColumns: `3.5em repeat(7, minmax(120px, 1fr))`,
    gridTemplateRows: `auto repeat(${(to - from) / STEP}, 4px)`,
  };

  return (
    <div className="tt-scroll">
      <div className="tt" style={grid}>
        {days.map((day, i) => {
          const { month, date, weekday } = dayParts(day);
          return (
            <div
              key={day}
              className={day === today ? 'tt-day today' : 'tt-day'}
              style={{ gridColumn: i + 2, gridRow: 1 }}
            >
              {month}/{date}（{WEEKDAYS[weekday]}）
            </div>
          );
        })}
        {hours.map((h) => (
          <div key={h} className="tt-hour" style={{ gridColumn: '1 / -1', gridRow: `${line(h)} / span ${60 / STEP}` }}>
            <span>{hhmm(h)}</span>
          </div>
        ))}
        {days.map((day, i) => {
          const spans = events
            .filter((e) => toDay(e.date) === day)
            .map((e) => ({
              id: e.id,
              title: e.title,
              label: `${e.start}〜${e.end} ${e.title}`,
              shown: hhmm(toMinutes(e.start)), // 画面には元の開始時刻を出す
              // 表の時間帯からはみ出す部分を切り落とし、5分単位に広げる
              start: Math.floor(Math.max(toMinutes(e.start), from) / STEP) * STEP,
              end: Math.ceil(Math.min(toMinutes(e.end), to) / STEP) * STEP,
            }))
            .filter((e) => e.start < e.end);
          return assignLanes(spans).map((e) => (
            <div
              key={e.id}
              className="tt-event"
              style={{
                gridColumn: i + 2,
                gridRow: `${line(e.start)} / ${line(e.end)}`,
                // 重なった予定は、日の列を lanes 等分して横に並べる
                width: `calc(${100 / e.lanes}% - 4px)`,
                marginLeft: `calc(${(100 * e.lane) / e.lanes}% + 2px)`,
              }}
              title={e.label}
            >
              <span className="tt-time">{e.shown}</span>
              {e.title}
            </div>
          ));
        })}
      </div>
    </div>
  );
}

9:00朝の勉強会｜列 0｜8:00 からの y 48.0px（60分）高さ 48.0px（60分）｜列内の左端 2.0px 幅 116.0px（列の 96.7%）
13:00資料づくり｜列 1｜8:00 からの y 240.0px（300分）高さ 120.0px（150分）｜列内の左端 2.0px 幅 116.0px（列の 96.7%）
7:30早朝ラン｜列 4｜8:00 からの y 0.0px（0分）高さ 48.0px（60分）｜列内の左端 2.0px 幅 116.0px（列の 96.7%）
19:00映画｜列 5｜8:00 からの y 528.0px（660分）高さ 48.0px（60分）｜列内の左端 2.0px 幅 116.0px（列の 96.7%）
10:12買い物｜列 6｜8:00 からの y 104.0px（130分）高さ 32.0px（40分）｜列内の左端 2.0px 幅 116.0px（列の 96.7%）

// 同じ日の予定を、重なりのない「列（レーン）」に振り分ける
export type Span = { id: string; start: number; end: number };
export type Placed<T> = T & { lane: number; lanes: number };

export function assignLanes<T extends Span>(items: T[]): Placed<T>[] {
  const sorted = [...items].sort((a, b) => a.start - b.start || b.end - a.end);
  const result: Placed<T>[] = [];
  let group: Placed<T>[] = []; // 重なりでつながっている予定のまとまり
  let laneEnds: number[] = []; // レーンごとの、最後に置いた予定の終わり
  let groupEnd = -Infinity;

  const closeGroup = () => {
    for (const p of group) p.lanes = laneEnds.length;
    result.push(...group);
    group = [];
    laneEnds = [];
  };

  for (const item of sorted) {
    // まとまりのどの予定とも重ならなければ、そこで区切る
    if (item.start >= groupEnd) closeGroup();
    // 空いている（前の予定が終わっている）いちばん左のレーンに置く
    let lane = laneEnds.findIndex((end) => end <= item.start);
    if (lane === -1) lane = laneEnds.length;
    laneEnds[lane] = item.end;
    group.push({ ...item, lane, lanes: 0 });
    groupEnd = Math.max(groupEnd, item.end);
  }
  closeGroup();
  return result;
}

[11/4] 定例: lane 0/3、レビュー: lane 1/3、電話: lane 2/3、ランチ: lane 0/1
[11/5] 練習: lane 0/2、面談: lane 1/2、日報: lane 0/2
[連続] A: lane 0/1、B: lane 0/1

.tt-scroll { overflow-x: auto; }
.tt { display: grid; font-size: 12px; }
.tt-day { padding: 4px 0; text-align: center; border-bottom: 1px solid #9aa5ab; }
.tt-day.today { background: #eefafd; color: #067a98; font-weight: bold; }
.tt-hour { border-top: 1px solid #dde3e6; }
.tt-hour span { display: inline-block; width: 3.5em; padding-right: 4px; text-align: right; color: #5b666c; transform: translateY(-50%); background: #fff; box-sizing: border-box; }
.tt-event {
  justify-self: start;
  box-sizing: border-box;
  overflow: hidden;
  padding: 2px 4px;
  border-left: 3px solid #067a98;
  border-radius: 4px;
  background: #c8f3fa;
  line-height: 1.3;
}
.tt-time { display: block; font-size: 11px; color: #067a98; white-space: nowrap; }

// import と、予定のデータ（events）は省略
const TODAY = toDay('2026-11-04');

export function App() {
  const [weekStart, setWeekStart] = useState(() => mondayOf(TODAY));
  const { month, date } = dayParts(weekStart);
  return (
    <main>
      <div className="toolbar">
        <button onClick={() => setWeekStart((d) => d - 7)}>‹ 前の週</button>
        <button onClick={() => setWeekStart(mondayOf(TODAY))}>今週</button>
        <button onClick={() => setWeekStart((d) => d + 7)}>次の週 ›</button>
        <span className="range">{month}/{date} からの週</span>
      </div>
      <Timetable events={events} weekStart={weekStart} today={TODAY} />
    </main>
  );
}

次の週 → 11/9 からの週 | 11/9（月） 11/10（火） 11/11（水） 11/12（木） 11/13（金） 11/14（土） 11/15（日） | 予定: 9:00翌週の勉強会 | 今日の列の数: 0
前の週を2回 → 10/26 からの週 | 10/26（月） 10/27（火） 10/28（水） 10/29（木） 10/30（金） 10/31（土） 11/1（日） | 予定の数: 0 | 今日の列の数: 0
今週 → 11/2 からの週 | 予定の数: 12 | 今日の列: [ '11/4（水）' ]