カレンダー表示
予約、予定、締切、作業日を月・週・日単位で確認できる表示にします。
カレンダー表示は、日付や時間に紐づくデータを、一覧表ではなく予定表として確認するためのUIです。Roundtableでは、月表示で全体量を見るのか、週表示で担当者の稼働を見るのか、日表示で時間帯ごとの予約枠を見るのかを先に決めておくと、必要なデータ項目と操作が揃いやすくなります。
この機能でできること
予約、面談、納期、作業予定、休業日、イベントなどを日付や時間帯に沿って表示できます。月単位では全体の混み具合、週単位では担当者や設備の稼働、日単位では時間枠ごとの空き状況を確認しやすくなります。
日付を軸にして、今どこが埋まっているかを見せる画面です。
単なる日付一覧ではなく、予定の種類、状態、担当者、残り枠、クリック後の操作まで決めると実装範囲が明確になります。
よくある利用場面
予約・受付管理
面談、体験、来店、施設利用などの予約枠と空き状況を日付ごとに確認します。
作業日・担当者予定
現場作業、制作予定、訪問予定、担当者の稼働日を週や月の単位で見ます。
締切・リマインド
提出期限、請求期限、更新期限、フォロー予定をカレンダー上で見落としにくくします。
プロンプト例
表示単位、対象データ、クリックしたときの動き、色分け条件をまとめて伝えると、カレンダーが単なる装飾ではなく業務画面として設計しやすくなります。
プロンプト
予約管理画面に月表示のカレンダーを追加してください。各日には予約件数、空き枠数、締切予定を表示し、予約あり、満枠、休業日で色を分けてください。日付を押したら、その日の予約一覧をサイドパネルで確認できるようにしてください。管理側で使い、将来は公開側の空き枠表示にも流用したいです。
この機能を使うときのポイント
表示単位月、週、日、時間帯、担当者別など、最初に必要な見え方を決めます。
予定の種類予約、作業、締切、休業日、仮押さえなど、色やラベルで分ける分類を整理します。
クリック後の操作詳細表示、追加、編集、空き枠予約、担当者変更など、日付や予定を押した後の流れを決めます。
公開してよい情報公開側では件名や担当者名を出してよいか、空き枠だけにするかを確認します。
この機能を実装するときのコツ
初回は月表示か週表示のどちらかに絞り、表示する予定の種類も主要なものだけにします。予定データには開始日時、終了日時、状態、担当者、公開可否を持たせ、画面側では期間移動や日付クリックをAjaxで更新できる形にすると使いやすくなります。予約受付まで行う場合は、重複予約、休業日、所要時間、キャンセル時の扱いをサーバー側でも確認します。