予約時間枠ピッカー（午前/午後切替）
予約時間枠ピッカーは、30 分単位のボタンを 4 列のグリッドに並べ、空き・埋まり・選択中の 3 状態を色で見分けられるようにした予約 UI です。各 .tp__slot はボタン要素で、満枠には is-full 、選択中には is-on のクラスを付与します。
解説
予約時間枠ピッカーは、30 分単位のボタンを 4 列のグリッドに並べ、空き・埋まり・選択中の 3 状態を色で見分けられるようにした予約 UI です。各 .tp__slot はボタン要素で、満枠には is-full、選択中には is-on のクラスを付与します。JS では :not(.is-full) で満枠を除外してクリックを受け付け、選んだ枠だけに is-on を付け替える単一選択を実現しています。
午前・午後の切替
上部のタブ .tp__tab をクリックすると is-on が移動し、午前と午後の枠を切り替えます。表示する枠データは JS 側で差し替える前提なので、実際の在庫状況に合わせて空き枠の生成へ繋げられます。
- 美容室・クリニック・カウンセリング等の来店予約
- 会議室や設備の時間貸し予約フォーム
- オンライン面談の枠選択ステップ
満枠ボタンは disabled 相当の見た目にし、色だけでなく文字で状態が伝わるようにすると、色覚に配慮したアクセシブルな予約画面になります。選択結果は隠しフィールドへ書き込んで送信に繋ぐのが実装の定石です。
よくある質問
満枠の時間は選べないようになっていますか。
はい。クリック処理は :not(.is-full) で満枠を除外しているため、is-full が付いた枠は選択できません。色でも区別されるので、利用者が迷わず空き枠を選べます。
時間の刻みを 15 分単位に変えられますか。
できます。グリッド内のボタン（slot）を必要なラベルで増減するだけで対応可能です。CSS の列数はそのままでも、列数を変えたい場合は grid-template-columns の repeat 数を調整してください。