画面の概要
お客様が月カレンダーの日付から予約可能日を選ぶための画面です。「メニューから選ぶ」方式(/reserve)に加えて用意された追加の導線で、日付起点で探したいお客様に向いています。URLのパラメータで店舗・カテゴリ・対象・リソースを絞り込めるため、目的別のリンクを配布したり、ページへ埋め込んだりできます。
2つのカレンダーURL
| URL | 役割 |
/reserve/calendar | 月カレンダー本体。訪問者向けの入口として使います。 |
/reserve/calendar-day | 対象を指定せずに日付をクリックしたときに開く「対象選択」中間画面。カレンダーから自動遷移するため、直接リンクは不要です。 |
絞り込みパラメータ(すべて任意)
URLの後ろに ?キー=値 の形で付けます。複数指定するとすべての条件を満たす(AND)で絞り込まれます。
| パラメータ | 指定内容 |
| store | 店舗をスラッグで指定。 |
| store_id | 店舗をIDで指定(store と併用時は store 優先)。未指定時は既定店舗。 |
| category_id | カテゴリIDで絞り込み。 |
| target_id | 予約対象IDで絞り込み。1件に定まると、日付クリックで中間画面を挟まず直接その予約フォームへ進みます。 |
| resource_id | リソースIDで絞り込み。そのリソース(個体)や同種別を必要とする対象に限定。スタッフを指定した場合は、遷移先で指名スタッフが選択済みになります。 |
| ym | 表示する年月(Y-m 形式。例:2026-08)。既定は当月。不正な値は当月に戻ります。 |
各日に名称を表示する(詳細表示フラグ)
次のパラメータを 1(または true/on/yes)にすると、予約可能な日のマスに、その日に予約できる名称をタグで一覧表示します。
| パラメータ | 表示内容(タグの色) |
| show_store | 店舗名(青) |
| show_category | カテゴリ名(紫) |
| show_target | 予約対象名(緑) |
| show_resource | リソース名(橙)。個体指定はリソース名、汎用の種別指定は種別ラベルを表示。 |
URLの例
| 例 | 意味 |
/reserve/calendar | 既定店舗の全対象で今月のカレンダー。 |
/reserve/calendar?store_id=1&category_id=2 | 店舗1・カテゴリ2に絞ったカレンダー。 |
/reserve/calendar?target_id=1&ym=2026-08 | 予約対象1の2026年8月。日付クリックで直接その予約フォームへ。 |
/reserve/calendar?resource_id=1&show_target=1&show_resource=1 | リソース1に絞り、各日に対象名とリソース名を表示。 |
カレンダーの見方
- ◯:絞り込み後の対象のうち、その日に1つでも予約可能枠がある日。クリックで予約導線へ進みます。
- -:予約可能枠が無い日(当月内の未来日)。クリックできません。
- 過去日:記号なし・選択不可。
- 「前の月/次の月」で月を移動できます(絞り込み・表示条件は保ったまま年月だけ切り替わります)。
予約タイプ別の「◯(予約可能)」の条件
| 予約タイプ | ◯になる条件 |
| 時間枠(time_slot) | その日に空き時間枠が1つ以上ある。 |
| イベント(event) | その日に開催回があり、残席がある。 |
| 時間割(timetable) | その日の曜日の固定枠に残席がある。 |
| 日付・連泊(date) | その日をチェックインとして1泊分の在庫が空いている。 |
日付クリック後の流れ
- 対象が1件に確定している場合(
target_id 指定など):その予約フォーム(/reserve/target/{id})へ直接進み、選んだ日付がセット済みになります。
- 対象が未指定の場合:中間画面(
/reserve/calendar-day)でその日に予約できる対象の一覧を表示。対象を選ぶと予約フォームへ進みます。
- 予約フォームでは、日付だけ決まる予約タイプ(時間枠・時間割)は遷移先で時刻・枠を選ぶ形になります。指定済みの日付・スタッフ・開催回は選択済みで表示されます。
補足情報
表示速度について:カレンダーは「月内の各日 × 対象数」だけ空き判定を行うため、対象が多いと表示が重くなることがあります。店舗・カテゴリ・対象・リソースで絞り込んだリンクで使うことを前提に設計されています。特定メニュー用のカレンダーなら target_id を付けたリンクを配布するのがおすすめです。
このカレンダーは、専用ページ(
/reserve/calendar)としてだけでなく、
トップページや任意のページに埋め込むこともできます。埋め込み方法は
ヘルパーでの埋め込みを参照してください。