週カレンダー
8〜19 時の時間帯グリッドに色分けした予定ブロックを置く週表示。現在時刻の赤線が引かれ、空いている枠をクリックすると 1 時間の仮予定が置かれる（もう一度クリックで取り消し）。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 8〜20 時の予定を週で俯瞰する業務カレンダー
- 空き枠から仮予定を置かせる予約・調整
- カレンダー種別が 3 色以内の場面
- 避ける場面
- 終日予定や月単位の把握が主の用途
- 予定の種類が 4 つ以上あり色で区別できないとき
- 構成要素
- ヘッダー（週送り／今日／凡例）
- 曜日ヘッダー
- 時間軸
- 時間枠のグリッド
- 予定ブロック・仮予定
- 現在時刻線
- 持っている状態
- 通常
- ホバー
- フォーカス
- キーボード
Tab で前週・次週・今日→時間枠（1 つだけ Tab 停止）→仮予定の順。枠は ←→ で曜日、↑↓ で時間、Home/End で端へ移動し Enter/Space で仮予定を置く／取り消す
- 支援技術
各枠は button＋aria-label「月 9:00 に仮予定を置く」で、Tab 停止は 1 つ（roving tabindex）。予定と現在時刻線は隠し文で種別・時刻を補う。週送りと結果は role=status で通知。凡例は色＋文字
- 動き
なし
デザインの要点
- 予定の色はカレンダー（仕事/私用/チーム）ごとに 3 色まで。色が増えるほど凡例が要る
- 現在時刻の赤線は「今」を探す手間を消す。今日の列だけ背景をわずかに変えて重ねる
- 空き枠のクリックで仮予定を置き、確定は別ダイアログに任せる。置く操作と書く操作を分ける
- スマホは 7 列を縮めず横スクロール＋スナップにする。時間軸は左に sticky で固定する
実装メモ
現在時刻の赤線はデモのため 10:40 固定です。実装では new Date() から (時 + 分/60 − 開始時) × 行の高さ で top を求め、1 分ごとに更新してください。
コード（コピーして使えます）
<div class="cw-app">
<header class="cw-head">
<div class="cw-nav">
<button type="button" class="cw-icon-btn" id="cw-prev" aria-label="前の週"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M12.5 4 6.5 10l6 6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg></button>
<button type="button" class="cw-icon-btn" id="cw-next" aria-label="次の週"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="m7.5 4 6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg></button>
<button type="button" class="cw-today-btn" id="cw-today">今日</button>
</div>
<h1 class="cw-h1" id="cw-title">2026年4月 20日 – 26日</h1>
<div class="cw-legend" aria-label="凡例"><span class="cw-dot cw-dot-work"></span>仕事<span class="cw-dot cw-dot-team"></span>チーム<span class="cw-dot cw-dot-private"></span>私用</div>
</header>
<div class="cw-scroll" id="cw-scroll">
<div class="cw-grid" id="cw-grid">
<div class="cw-corner"></div>
<div class="cw-days" id="cw-days"></div>
<div class="cw-times" id="cw-times"></div>
<div class="cw-cols" id="cw-cols"></div>
</div>
</div>
<p class="cw-hint" id="cw-hint" role="status">空いている枠をクリックすると仮予定を置けます</p>
</div>