# 予約カレンダーの使い方 ## 概要 予約カレンダーは、施設管理者が予約状況を視覚的に確認し、空き時間をクリックして即座に予約を作成するためのインターフェースです。予約管理ダッシュボードの **カレンダー** タブから利用できます。 カレンダーには3つの表示モードがあります： | 表示モード | 軸の方向 | 用途 | |-----------|---------|------| | **月表示** | 日付グリッド | 月全体の稼働状況を俯瞰する | | **週表示** | 横軸=7曜日 / 縦軸=部屋（横表示時） | 7日間 × 部屋の予約を一覧する | | **日表示（タイムライン）** | 縦軸=時間 / 横軸=部屋 | 1日の時間ごとの予約を確認する | > **モバイル端末では、週表示・日表示が自動的に縦タイムライン形式（Googleカレンダー風）に切り替わります。** PCでも縦表示に手動で切り替えることができます。 --- ## アクセス方法 **予約管理** → **カレンダー** タブ（デフォルト表示） --- ## 詳細機能 ## 機能1: 月表示 月全体を俯瞰するモードです。各日付セルに当日の予約件数や空き状況のグラジエントが表示されます。 - 日付セルをクリックすると週表示にドリルダウンできます - 各セルの **[+]** ボタンをクリックすると、その日を開始日として予約作成ドロワーが開きます - 時間貸し・タイムスロット予約は稼働グラジエントに反映されません（短時間予約は1日全体をブロックしないため） ## 機能2: 週表示 7日間の予約を部屋別に横並びで確認するモードです。 **横表示（PC デフォルト）** - 横軸に7曜日、縦軸に部屋が並ぶ、クラシックなスプレッドシート型グリッド - 各セルは1日 × 1部屋を表す - 空きセルをクリックすると、その日・部屋が自動入力された予約作成ドロワーが開きます **縦タイムライン表示（モバイル、またはPC縦切り替え後）** - 縦軸に時間（上が早朝、下が深夜）、横軸に部屋が並ぶGoogleカレンダー風レイアウト - 予約ブロックが時間に対応した高さで表示されます - 上下スクロールで時間帯を移動、左右スクロールで部屋を切り替えます - 日付列ヘッダーをタップすると、その日の日表示（タイムライン）にドリルダウンできます ## 機能3: 日表示（タイムライン） 1日分の予約を時間軸と部屋軸で確認するモードです。 - 縦軸が時間（上が0時、下が24時）、横軸が部屋 - カレンダーは表示時にデフォルトで午前7時付近までスクロールします - 予約ブロックは開始〜終了時刻に応じた高さで表示されます - 同一部屋・同一時間帯に複数の予約がある場合、横に並べて表示されます（レーン分割） - 空きエリアをタップすると、その時刻・部屋が自動入力された予約作成ドロワーが開きます ## 機能4: 横/縦 表示切り替えトグル（PC のみ） PC 環境では、カレンダーヘッダーの右端に **横/縦** の切り替えトグルが表示されます（週表示・日表示のみ。月表示には表示されません）。 - **横アイコン（三本線）**: 従来の横グリッド表示（横軸=日付 / 縦軸=部屋） - **縦アイコン（三本縦線）**: Googleカレンダー風の縦タイムライン表示（縦軸=時間 / 横軸=部屋/曜日） 選択した表示方式はブラウザのローカルストレージに保存されるため、ページを再読み込みしても維持されます。 > **モバイル端末では常に縦タイムライン表示になり、このトグルは表示されません。** ## 機能5: カレンダーから予約を作成する カレンダーの空きエリアをクリック（またはタップ）すると、画面右側（モバイルでは下部シートまたは画面全体）に **予約作成ドロワー** が開きます。 | 表示モード | 操作 | 自動入力される情報 | |-----------|------|-----------------| | 月表示 | 日付セルの **[+]** ボタンをタップ | チェックイン日 | | 週表示（横） | 空きセルをクリック | チェックイン日 + 部屋 | | 週表示（縦タイムライン） | 空きエリアをタップ | チェックイン日 + 部屋 + 時刻 | | 日表示（タイムライン） | 空きエリアをタップ | チェックイン日 + 部屋 + 時刻 | タップした時刻は15分単位でスナップされます。 ## 機能6: 予約詳細を確認する カレンダー上の予約ブロックをタップすると、予約詳細ドロワーが開きます。ゲスト情報・日程・金額・支払い状況・アクセスコードを確認できます。 ## 機能7: 売止めの帯を確認・操作する 月表示・週表示には、売止め（プランの販売を止める期間）が**「売止」の帯**として表示されます。 - **過去の日にも表示されます。**「先週の水曜はなぜ予約が入らなかったのか」を後から確認できるようにするためです - 帯には対象・期間・理由が表示されます - 同じ日に複数の売止めがある場合は「売止 2」のようにまとまって表示され、開くとどれを編集するか選ぶ画面になります - **帯をタップ（クリック）すると、その場で売止めの追加・編集・削除ができます。** カレンダーから開くと日付が入力済みの状態で編集画面が開きます - **閲覧は施設メンバーも可能です。追加・編集・削除は施設オーナー以上のみ**で、権限が無い場合はボタンが表示されません 詳しくは [売止め](sales-blocks.md) を参照してください。 ## 機能8: ズーム調整（PC の横表示のみ） PC の横表示時、カレンダーヘッダーの右端に **+/−** のズームボタンが表示されます。時間軸の幅（セル幅）を拡大・縮小できます。 > **縦タイムライン表示時とモバイルではズームボタンは表示されません。** --- ## モバイルでの利用方法 スマートフォン・タブレット端末でカレンダーを開くと、自動的に縦タイムライン表示（週表示・日表示）に切り替わります。 | 操作 | 動作 | |------|------| | 上下スクロール | 時間帯の移動 | | 左右スクロール | 部屋（日表示）または曜日（週表示）の切り替え | | 予約ブロックのタップ | 予約詳細の表示 | | 空きエリアのタップ | 予約作成ドロワーを開く | | 日付列ヘッダーのタップ（週表示のみ） | その日の日表示にドリルダウン | 月表示・週表示・日表示の切り替えは、カレンダーヘッダーの「月 / 週 / 日」タブボタンで行います。 --- ## よくある質問 ### Q: スマートフォンでカレンダーが横に広くて見づらい スマートフォンでは週表示・日表示は自動的に縦タイムライン（Googleカレンダー風）に切り替わります。横に広い表示になる場合は、ヘッダーの「日」ボタンをタップして日表示（1日分）に切り替えると見やすくなります。 ### Q: PCで縦タイムライン表示に切り替えたが、次回ログイン時に元に戻っている 表示設定はブラウザのローカルストレージに保存されます。別のブラウザや別のデバイスでは設定が引き継がれません。また、ブラウザのデータをクリア（キャッシュ・Cookieの削除）すると設定がリセットされます。同じブラウザで使用する限りは設定が維持されます。 ### Q: 週表示で部屋数が多いため予約が見づらい PC 横表示の場合は **縦表示** に切り替えると（ヘッダー右端のトグル）、部屋が横並びになり、左右スクロールで確認できます。日表示（タイムライン）に切り替えて1日ずつ確認するのもおすすめです。 ### Q: 時間貸し予約が月表示に表示されない 月表示では時間貸し・タイムスロット予約は稼働グラジエントに反映されません。週表示または日表示（タイムライン）に切り替えると、時間単位の予約バーとして正確な時刻に表示されます。 ### Q: 予約ブロックをタップしても何も起きない 予約ブロックが重なっている場合（衝突予約）や、ブロックが非常に短い場合（15分未満）は、タップしにくいことがあります。日表示（タイムライン）に切り替えて時間軸を広げると操作しやすくなります。 ### Q: カレンダーに赤いバナーが表示されている iCal連携などで予約の衝突（在庫の二重取り）が発生しています。バナーをタップすると「要対応」タブに移動し、衝突した予約を確認・解決できます。詳細は[要対応: 予約の重複](unassigned-reservations.md)をご参照ください。 ### Q: カレンダーに「売止」という帯が出ています その日・その対象（プラン）に売止めが設定されています。帯をタップすると詳細の確認・編集・削除ができます。詳しくは[売止め](sales-blocks.md)をご参照ください。 ### Q: 空きエリアをタップしたが予約ドロワーが開かない 月表示では日付セルの **[+]** ボタンをタップする必要があります。週表示・日表示では空きエリアを直接タップしてください（予約ブロックの上をタップすると詳細が開きます）。 --- ## 関連ページ - [予約管理ダッシュボード](booking.md) - [予約設定フォーム（作成・編集）](reservation.md) - [要対応: 予約の重複（衝突解決）](unassigned-reservations.md) - [売止め](sales-blocks.md) - カレンダーの「売止」帯と、特定の日だけプランの販売を止める設定 - [週間グリッド設定（施設オーナー・管理者向け）](hourly-week-grid-admin.md) - [週間グリッドで時間を選んで予約する（ゲスト向け）](hourly-week-grid-guest.md)