MultiDatePick ユーザーガイド

1. 3 つのコンポーネント: 使い分け

MultiDatePick には、共通の基盤の上に作られた 3 つの Lightning Web コンポーネントが含まれています。データに合うものを選んでください。

機能比較

機能は積み重なります。Date の機能はすべて Date Time と Booking にもあります。Date Time は時刻を、Booking はリソースと定員を追加します。

2. レコード形式: 使い分け

レコード形式とは、選択内容をどのようにレコードにするかです。3 つの独立した選択で決まり、どの組み合わせでも動作します。

セットアップウィザードでは 6 つの形式に名前があります: 日付ごとに 1 レコード、日付範囲ごとに 1 レコード、時間帯ごとに 1 レコード、親 + サブブロック、単一リソース、複数リソース。

具体例: 3 つの質問に答える

シナリオごとに 3 つの質問に答えると、形式が決まります。セットアップウィザードも同じ 3 つを質問します。

早見表: すべての組み合わせ

時刻とリソースの要件に合う行を選びます。列は End Date Field API Name を設定しているかどうかで決まります。どのセルも有効な設定です。

まとめ: 3 つの選択はどう組み合わせても動作します。シナリオが名前付きのパターンに当てはまらなくても、それぞれの選択を個別に設定すれば、あとはコンポーネントが処理します。

3. セットアップウィザードの手順

セットアップウィザードで設定を一度保存します。任意のページやフロー画面で、その名前を Config Name（設定名） に入力すれば、その配置で設定が使われます。設定を変更すると、すべての配置に反映されます。

1. 1 名前と種別
2. 2 オブジェクトと項目
3. 3 時刻項目
4. 4 状況と表示
5. 5 確認と保存

開始方法を選ぶ

新規作成 タブには 2 つの入口があります。手順に沿って案内してほしい は 3 つの質問をして、コンポーネントと形式を選びます。すべてのプロパティを設定 はすべての設定を開きます。隣にはさらに 2 つのタブがあります: 保存済みの設定を編集する 既存の設定 と、Config Library から設定を貼り付ける インポート です。

ステップ 1: 名前と種別

コンポーネント (Date、Date Time、Booking) を選び、設定に名前を付けます。この名前を後で Config Name に入力します。このステップでは表示も設定します: 既定の表示、切り替えで選べる表示、タイムラインと予定一覧のオプションです。

ステップ 2: オブジェクトと項目

最も重要なステップです。レコードを保存するオブジェクト、その日付項目、親への関連項目を選びます。任意の項目で、範囲、リソース、定員、サブブロック、ブロック日付を追加できます。Booking の設定では、リソースオブジェクト、定員項目、営業時間もここで設定します。

ステップ 3: 時刻項目

Date Time と Booking のみ。開始時刻と終了時刻の項目を対応付け、時間間隔 (任意の間隔が使えます。15、30、60 分が一般的です)、最早・最遅の時刻、表示モード、競合時の動作を設定します。

ステップ 4: 状況と表示

状況項目と色、非表示にする状況、ユーザーが選べる状況、ホバー項目、編集モード、レコードの命名、ボタンのラベル、カレンダーサイズ、Max Dates Allowed などの上限。

ステップ 5: 確認と保存

概要を確認し、ライブプレビューを試してから、設定を保存 をクリックします。ウィザードが 30〜60 秒で設定をデプロイします。完了したら、必要に応じて説明を追加します。

既存の設定とインポート

保存した設定は 既存の設定 に一覧表示されます。クリックすると編集やエクスポートができます。インポート タブでは、Config Library の任意のカードの JSON や、別の組織からのエクスポートを取り込めます。

4. 権限セットとアクセス権

パッケージには 4 つの権限セットが含まれています。[設定] の [権限セット] で割り当ててください。

コンポーネントは各ユーザー自身の権限で動作するため、ユーザーには自社のオブジェクトと項目へのアクセス権も必要です:

• オブジェクト: レコードの保存先オブジェクトの参照と作成、およびカレンダーが読み取るリソース、休業、子オブジェクトの参照。
• 項目 (参照): カレンダーが表示するすべての項目 (日付、状況、ホバー項目)。
• 項目 (編集): カレンダーが書き込むすべての項目 (日付、時刻、状況、2 つ目の選択リスト、名前項目、親への参照)。ユーザーが編集できない項目があると、参照はできても保存に失敗します。
• 参照先のレコード: 新しいレコードが指す親とリソースへの、少なくとも参照権限。

各エラーメッセージとその原因は トラブルシューティング: アクセスエラー にあります。ゲストサイトにはいくつか追加の手順が必要です: 公開ゲストページ を参照してください。

5. クリックで保存とフローによる保存

保存方法は 2 つあります。配置に合うほうを選んでください。

クリックで保存: 4 つの設定

セットアップウィザードがこれらを入力します。4 つすべてに値が入ると、保存ボタンが表示されます。

ページがどの親レコードを使うか、またフローで親レコードを選ぶべき場合については アプリケーション・ホーム・Experience ページ で解説しています。

フローによる保存: 出力

4 つの設定を空欄のままにします。保存ボタンは非表示になり、選択内容は次のフロー出力から渡されます:

JSON を Parse Date Entries from JSON に渡します。ループで処理できるリストが返され、各項目には開始日、終了日、開始時刻、終了時刻、リソース ID が含まれます。詳しい手順: フローのレシピ。

保存は追加のみ

クリックで保存は新しいレコードを作成するだけです。日付の選択を解除しても保存済みのレコードは削除されないため、クリックを間違えてもデータは失われません。レコードを変更・削除するには、編集モード または関連リストを使います。

6. 状況の色と編集モード

状況の色とフィルター

オブジェクトの任意の選択リストでレコードを色分けし、一部の値を非表示にし、エンドユーザーが選べる値を制限できます。

編集モード

Enable Edit Mode（編集モードを有効化） をオンにすると、編集 ボタンが表示されます。編集モードでは、ユーザーは次の操作ができます:

• 既存のレコードを、日付と状況付きのカードで確認する
• 日付をクリックして、そのレコードを編集対象に加える
• 日付、時刻、リソース、状況を変更すると、レコードが更新される
• 2 回クリックの確認で削除するため、誤って消えることはない

7. 表示: 1 つのコンポーネントで 5 つのレイアウト

どのコンポーネントも 5 つのレイアウトを表示できます。同じ項目の対応付けで同じレコードを読み取り、同じ競合ルール、ブロック日付、営業時間に従い、同じ方法で保存します。表示を切り替えて変わるのはレコードの見え方だけで、意味は変わりません。

5 つの表示と、それぞれが答える質問

設定

ページごとに異なる表示

表示は配置ごとの設定なので、同じレコードを場所に応じて異なる見え方にできます。インストールも項目の対応付けも 1 回だけです。

編集モードはすべての表示で使えます

Enable Edit Mode をオンにすると、すべての表示に編集ボタンが表示されます。タイムライン、週、予定一覧でレコードをクリックすると、月間カレンダーの日付と同じように編集対象に加わります。タイムラインからの状況の一括変更も、カレンダーからの場合とまったく同じように動作します。

タイムライン: 折りたたまれた行

リソースに重なる予約があると、その行は N 件同時 のラベル付きの 1 本の帯に折りたたまれます。展開アイコンを開くと、予約ごとに 1 段ずつ表示されます。折りたたまれた行でも、ドラッグ、ホバー、クリックができます。

タイムライン: ドラッグで日程変更

Enable Edit Mode をオンにすると、タイムラインのバーをドラッグできます。中央をつかむと予約を別の日に移動し、端をつかむと開始日や終了日を変更します。バーに移動先が表示され、離すと保存されます。日単位のズームでは、同じ操作で時刻を変更できます。

会議室だけでなく人のスケジュールも管理

Resource Object API Name には任意のオブジェクトを指定できます。User に設定すると、タイムラインは勤務表に、週はシフト表に、稼働率はチームの稼働状況ダッシュボードになります。

• ユーザーには標準の定員項目がありません。稼働率をパーセントで表示するには、カスタム項目 (例: Daily Capacity) を追加してください。
• Business Hours Start Field（営業時間開始項目） と Business Hours End Field（営業時間終了項目） をユーザーの項目に対応付けると、週のグリッドが各自の勤務時間に合わせて表示されます。

Config Library には、すぐに使える例が 2 つあります: チームのキャパシティ計画 と スタッフのシフト表。

8. リソース予約と定員 (Booking コンポーネント)

単一リソース

ユーザーはドロップダウンからリソースを 1 つ選びます。タイムグリッドにそのリソースの予約と定員が読み込まれます。

複数リソース

Allow Multiple Resources（複数リソースを許可） をオンにすると、ドロップダウンがチェックボックスに変わります。グリッドにはチェックしたすべてのリソースで空いている時間枠だけが表示され、保存するとまとめて予約されます。

定員

複数の予約で 1 つの時間枠を共有でき、3/5 のバッジがリアルタイムで表示されます。満員の時間枠は予約を受け付けません。

競合

Conflict Behavior（競合の動作） は、選択した時間枠がすでに埋まっている場合の動作を決めます。Conflict Look-Ahead Days は、どこまで先を確認するかを設定します (既定は 360)。

休業が常に優先されます。Allow でも、ブロックされた時間枠には何も保存されません。

9. ユーザーが選択できる範囲を制限する

1 人が選択できる量を、日付数または時間枠数で制限します。

10. 日付・時刻・リソースのブロック (休業日)

どのカレンダーも別のオブジェクトから休業日を読み取り、対象の日付、時間枠、リソースをグレー表示にできます。これにより、ユーザーは営業中の時間だけを予約できます。いくつかの設定を休業オブジェクトに向けるだけで、あとはコンポーネントが処理します。終日のブロックは 3 つのコンポーネントすべてで使えます。時刻とリソースのブロックには、Date Time または Booking のタイムグリッドが必要です。

ブロックと非表示の違いは?

似ているようで、働きは正反対です。ブロックは空きをなくします: 時間枠は表示されますが予約できません。非表示はレコードを表示から外すため、その時間枠が空きます。

ブロック日付の設定

ブロックの 3 つのレベル

1. 終日: 時刻のない休業日は、その日付全体をグレー表示にします。3 つのコンポーネントすべてで使えます。予約がすでにある日付でも、休業日は休業日のままです。
2. 1 日の一部: 開始時刻と終了時刻のある休業日は、その時間枠だけをブロックします。残りの時間は予約できます。ブロックされた時間枠は、日付を選択すると表示されます。
3. 1 つのリソース: リソースを指す休業日は、そのリソースだけを休業にします。単一リソースの表示では時間枠に取り消し線が付きます。合計の表示では隅に小さな印が付き、空いているリソースでは引き続き予約できます。

タイムグリッドを使うなら、1 日の一部のブロックが適しています。終日のブロックは日付のみの選択に向いています。

休業オブジェクトの 2 つのパターン

• 同じオブジェクトを状況で区別: Blocked Dates Object を予約オブジェクトに向け、Status = Cancelled で絞り込むと、キャンセルされた予約が休業日を兼ねます。最も簡単ですが、そのオブジェクトを使うすべてのカレンダーで共有されます。Config Library の 祝日を考慮したアポイント予約 設定を参照してください。
• 専用の休業オブジェクト: 日付、任意の開始・終了時刻、Region 項目、任意のリソース参照を持つ Office Closure オブジェクト。各カレンダーは自分の地域で絞り込み、休業日を 1 つのリソースに限定することもできます。時間単位のリソース休業 設定を参照してください。

利用者が自分の時間をブロックできるようにするには (担当者が午前中をブロックするなど)、休業オブジェクトに保存する Date Time コンポーネントを社内ページやサイトに配置します。

ブロックされた時間枠の動作

• 見た目: 完全に休業の時間枠は取り消し線付きでグレー表示されます。選択したリソースの一部だけが休業の時間枠には、隅に印が付きます。
• 選択: 完全に休業の時間枠は、クリックもドラッグもできません。
• 保存: 休業中のリソース、日付、時刻には何も保存されません。複数リソースの場合は休業中のリソースだけが除外され、空いているリソースは予約されます。

1 つの休業日テーブルで多くのカレンダーに対応

休業オブジェクトにタグ項目 (Region、Location、Building) を持たせ、同じ項目をリソースにも追加します。各カレンダーは Resource Filter Field / Value で自分のリソースを表示し、Blocked Dates Filter Field / Value で自分の休業日を読み取ります。

11. 公開ゲストページ (Experience Cloud)

コンポーネントを Experience Cloud サイトに配置すると、誰でもログインせずに予約できます。ゲストとしてテストする前に、5 つの手順をすべて済ませてください。

1. オブジェクト権限。 サイトのゲストユーザーに各オブジェクトの参照権限を付与し、ゲストが送信する場合は作成権限も付与します。Salesforce ではゲストはレコードの編集や削除ができないため、編集、キャンセル、削除のページはログインユーザー向けにしてください。
2. コンポーネントが扱うすべての項目の項目レベルセキュリティ。リソースの営業時間項目や休業日の時刻項目も含みます。1 つでも欠けると、リソースや休業日のクエリが止まります。
3. ゲストがレコードを参照できるようにするゲストユーザー共有ルール (参照)。ルールを適用するには、オブジェクトの外部組織の共有設定が 非公開 である必要があります。メタデータとしてデプロイしたルールは、[設定] の [共有設定] で 再計算 を 1 回クリックする必要があります。
4. サイトのゲストユーザーに MultiDatePick - Guest 権限セット。コンポーネントがデータを読み込むための Apex クラスへのアクセス権が含まれています。
5. サイトを有効化します。 公開と有効化は別の手順です。

• ゲストに表示されるレコード: 公開ページは Static Parent Record Id を使うため、すべてのゲストが同じ親レコード (1 つのオフィス、拠点、リソース) に対して予約します。訪問者ごとのレコードにするには、URL パラメーター付きのフローで制御します。ユーザーごとのカレンダーには、ログインユーザーが必要です。
• 取引先責任者と取引先: Salesforce はこれらへのゲストアクセスを厳しく制限しています。ゲストの予約にはカスタムオブジェクトを使うか、認証済みサイトを使ってください。
• 1 ページに複数のコンポーネント: リアルタイムでは同期しません。一方で行ったブロックがもう一方に反映されるよう、間に更新を促す表示を入れてください。

配置の手順は アプリケーション・ホーム・Experience ページ にあります。サイト全体の作成例は Experience Cloud での予約 を参照してください。

12. よくある注意点 (FAQ)

バナーが表示される、保存ボタンがない、カレンダーが空、といった場合は、トラブルシューティング で各メッセージをスクリーンショットと対処法付きで確認できます。

状況の色が反映されない

3 点を確認してください。(a) Status Field（状況項目） は選択リストの API 名と完全に一致していますか? 大文字と小文字は区別されます。(b) Status Colors は引用符なしの Value:#hex, Value:#hex 形式ですか? 'Confirmed':'#22C55E' と書くと、エラーなしで機能しなくなります。(c) レコードのその選択リストに実際に値が入っていますか?

レコードが予期しない名前で保存される

Record Name Field（レコード名項目） を確認してください: 項目の文字数が少ないと、長い名前は切り捨てられます。Append Date to Record Name も確認してください: オンにすると、選択した日付と時刻がすべての名前に追加されます。

Cancelled のレコードを定員グリッドから非表示にするには?

Ignored Statuses を Cancelled、または Cancelled,Rejected のようなリストに設定します。カレンダーと定員の集計から外れます。

ブロックと非表示の違いは?

ブロック (休業日) は、日付、時刻、リソースを表示したまま予約できなくします: 祝日、メンテナンス、閉鎖中の会議室など。非表示は、Cancelled などのレコードをカレンダーと定員から外し、時間枠を空けます。ブロックと非表示の違い を参照してください。

編集ボタンが表示されない

Enable Edit Mode をオンにしてください。3 つのコンポーネントとも、必要なのはそれだけです。Status Field は任意で、エディターに状況のドロップダウンが追加されるだけです。それでもボタンが表示されない場合は、ページまたは設定で Enable Edit Mode がオフになっています。

一部のリソースだけを表示したい (設備ではなく会議室だけ)

Resource Filter Field と Resource Filter Value（リソースフィルター値） を使います。値が 1 つの場合: 項目 Active__c、値 true。複数の値 (OR): North,South。複数の項目 (AND): 項目 Type__c;Active__c、値 Conference Room;true。

Date Time で共通の時刻選択が 1 つしか表示されない

使う設定は Time Display Mode（時刻表示モード） です: Grid または Dropdown。Grid モードでは、すべての日付が 1 つのグリッドを共有します。日付ごとに別の時刻にするには、Dropdown を選び、Allow Different Times Per Date をオンにします。

フローによる保存からクリックで保存に切り替えるには?

Parent Record Id、Child Object API Name、Date Field API Name、Relationship Field API Name を入力します。Parse Date Entries from JSON アクションと、レコードを作成していたループを削除します。これでコンポーネント自身の保存ボタンがレコードを書き込みます。

詳細のないエラーメッセージが表示される

ブラウザーの開発者コンソールを開き、[MDP:ERROR] で始まる行を探してください。メッセージが短くても、完全なエラーは常にそこに記録されています。

13. フローのレシピ

ここにあるものはすべて Flow Builder で作成します。Apex は不要です。

選択した日付をループ処理する

1. Date Time コンポーネントを配置した画面を追加します。クリックで保存の設定は空欄のままにします。
2. 画面の後に Parse Date Entries from JSON アクションを追加し、Dates With Times JSON (Output) を渡します。
3. アクションが返すリストをループ処理します。各項目には開始日、終了日、開始時刻、終了時刻があります。
4. ループ内で値をレコード変数に割り当て、コレクションに追加します。レコードはループの後で一度に作成します。

最初と最後の日付を親レコードに集計する

親レコードに子の最も早い日付と最も遅い日付を表示したい場合は、データに合うノーコードの方法を選びます。

その他のフローのパターン: 画面フローガイド。

14. オブジェクトと項目の対応付け

各コンポーネントのページに、オブジェクトと項目の対応付けの全体図があります:

• Date: オブジェクトの対応付け
• Date Time: オブジェクトの対応付け
• Booking: オブジェクトの対応付け

コンポーネントは任意のオブジェクトで動作します。パッケージに含まれるサンプルオブジェクト (Schedule、Event、Resource、Sub Block) は既定値にすぎません。適切な項目を持つ独自のカスタムオブジェクトや標準オブジェクトを設定で指定してください。

15. 全プロパティのリファレンス

3 つのコンポーネントのすべての設定を、Lightning App Builder、Experience Builder、Flow Builder に表示されるラベルで掲載しています。各ラベルの下に API 名があります。

16. セキュリティとアクセシビリティ

• Salesforce AppExchange セキュリティレビューに合格済み。
• 100% ネイティブ。 データは Salesforce 組織内にとどまります。外部サーバーもコールアウトも使いません。信頼性とセキュリティ を参照してください。
• 常にユーザー自身の権限で。 すべての読み取りと保存はユーザー自身のアクセス権で実行されるため、オブジェクト権限、項目レベルセキュリティ、共有がレコードごとに適用されます。
• アクセシブル。 WCAG 2.1 AA に準拠し、axe-core でテスト済み。VPAT 2.5 も完備しています。
• 9 言語に対応: 英語、スペイン語、フランス語、ドイツ語、日本語、ヒンディー語、ポルトガル語 (ブラジル)、イタリア語、中国語 (簡体字)。

17. 質問やバグ報告は?

このガイドで足りない点や、動作しない箇所を見つけたら、support@multidatepick.com までメールでお知らせください。