Salesforce で時間枠を選べるカレンダーを作る
Salesforce にあるのは日付選択と時間項目だけで、選択できる時間枠のグリッドはありません。本格的な Salesforce の時間枠選択に何が必要か、そして自作せずに手に入れる方法を解説します。
時間枠選択は決まった形の画面です。日付を選ぶカレンダーがあり、その下にその日を予約可能な間隔に区切ったグリッドが表示され、埋まっている枠は一目で予約不可とわかります。ネット上の予約サイトはどこもこの形なので、誰でも見覚えがあるはずです。しかし Salesforce には標準で用意されていません。
Salesforce に標準で用意されているもの
標準の日付/時間項目は、日付入力と時刻のドロップダウンとして表示されます。これはただのフォーム部品で、ほかに何が予約されているかを知りません。項目は他のレコードの存在を知らないので、ユーザーがすでに埋まっている枠を選んでも止められません。チェックが行われるのは、ユーザーが選択を確定した後の入力規則やフローの中です。
ここに足りない部分があります。時間枠選択はユーザーが選ぶ前に既存のレコードを検索し、空いている枠だけを提示します。
本格的な時間枠選択に必要なこと
| 要件 | 標準項目 | MultiDatePick なら |
|---|---|---|
| 1 日を間隔で区切る | 間隔という概念がない | 任意の間隔 (15、30、60 分が一般的) |
| 営業時間を把握する | どの時刻でも有効 | 最も早い時刻と最も遅い時刻、またはリソースごとの営業時間 |
| 埋まっている枠を表示する | 何も表示されない | 既存の予約をグリッド上に表示 |
| 1 つの枠に複数人 | 表現できない | 定員を設定し、予約数/定員のバッジをリアルタイム表示 |
| 日付ごとに異なる時刻 | 1 項目に 1 つの値 | Allow Different Times Per Date |
| 保存時に重複を防ぐ | 独自のロジックが必要 | 競合の動作: block、skip、allow |
自作が見た目以上に大変な理由
画面の描画は簡単な部分です。見積もりから漏れがちなのは次の部分です。
予約の検索
誰かが 2 か月表示を開いてもガバナ制限を超えないよう、効率よく検索する必要があります。
重複の計算
予約の長さがまちまちになった途端に面倒になります。
タイムゾーン
実行ユーザーのタイムゾーンとレコードのタイムゾーンが同じとは限りません。
競合状態
2 人が同じ瞬間に同じ空き枠を見ている場合です。
項目レベルセキュリティ
コンポーネントは、実行ユーザーが参照できる範囲を守る必要があります。
アクセシビリティ
クリックできる div を並べたグリッドは、そのままではキーボードで操作できません。
最も手間がかかるのはアクセシビリティです。時間枠のグリッドには、正しい ARIA グリッドのセマンティクス、矢印キーでの移動、色以外でも伝わる状態表示が必要です。社内開発で最も省かれがちで、調達審査で必ず聞かれる部分です。
ひと目で探せるように時間枠をグループ化する
9 時から 17 時までを 15 分間隔で区切ると 32 枠になります。単純なリストで並べると、壁のように見えてしまいます。午前、午後、夕方の時間帯ごとにまとめれば、3 つの短いブロックになります。特に、スマートフォンで予約する顧客にとって効果的です。
カレンダーそのものが不要な場合
日付がすでに決まっている場合もあります。日付が入っている予定のレコードページでは、月間カレンダーは不要です。Time Grid Only（タイムグリッドのみ） を使うとカレンダーを表示せず、その日付の時間枠グリッドだけを表示します。日付はホストレコードの項目から読み取るか、直接指定できます。
時間枠選択を形づくる設定
どれもセットアップウィザードの項目です。コードは一切不要です。
| 設定 | 機能 | API 参照名 |
|---|---|---|
| 時間間隔（Time Slot Interval (Minutes)） | 各時間枠の長さ。任意の分数を指定できます。 | timeInterval |
| 最小時刻 / 最大時刻（Earliest Time / Latest Time） | Dates & Times コンポーネントでグリッドが表示する時間帯。 | minTime、maxTime |
| 営業時間開始項目 / 営業時間終了項目（Business Hours Start / End Field） | Booking コンポーネントでのリソースごとの営業時間。 | businessHoursStartField |
| 定員項目（Capacity Field） | 1 つの時間枠でリソースが受け付ける予約の数。 | capacityField |
| 時間枠を時間帯でグループ化（Group Time Slots by Period） | 午前、午後、夕方のセクションに分けて表示。 | groupTimeSlotsByPeriod |
| 競合の動作（Conflict Behavior） | 保存時の重複をブロック、スキップ、または許可。 | conflictBehavior |
| タイムグリッドのみ（Time Grid Only） | 決まった 1 日の時間枠グリッドだけを表示。 | timeGridOnly |
よくある質問
時間枠選択カレンダーとは?
日付を選ぶカレンダーの下に、その日を予約可能な間隔に区切ったグリッドが表示されるものです。すでに埋まっている時間枠は予約不可として表示されるため、空いている時間だけを選べます。
Salesforce に時間枠選択の機能はありますか?
自社のオブジェクト向けにはありません。標準の日付/時間項目は日付入力と時刻のドロップダウンで、他のレコードを参照できません。MultiDatePick は、カレンダーの読み込み時に既存の予約を読み取り、空いている時間だけを提示する時間枠選択を追加します。
時間枠の長さは自由に決められますか?
はい。時間枠の間隔は任意の分数で設定できます。15 分、30 分、60 分が一般的ですが、45 分の面接枠も同じように設定できます。
時間枠選択を追加するのに Apex や開発者は必要ですか?
いいえ。セットアップウィザードが設定を作成し、Config Name を指定するだけで、コンポーネントをレコードページ、アプリケーションページ、Experience Cloud サイト、画面フローに配置できます。書くべきコードはありません。
Salesforce の時間枠選択を、設定するだけで
ライブデモで空いている時間枠を選んでから、「はじめに」の手順で自分の組織に追加しましょう。
- $20/ユーザー/月ですべての機能
- 30 日間無料、カード不要
- 100% Salesforce ネイティブ
- Apex 不要
- Salesforce AppExchange で近日公開