週カレンダー
8〜19 時の時間帯グリッドに色分けした予定ブロックを置く週表示。現在時刻の赤線が引かれ、空いている枠をクリックすると 1 時間の仮予定が置かれる（もう一度クリックで取り消し）。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- 予定の色はカレンダー（仕事/私用/チーム）ごとに 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>