Date: Salesforce の複数日付・期間ピッカー
必要なだけ日付をクリックし、ドラッグで期間を選び、繰り返しパターンも追加できます。日付はすべて Salesforce のレコードに保存されます。
または今すぐ MultiDatePick のライブデモを試す (ログイン不要) →画面フロー、レコードページ、アプリケーションページ、ホームページ、Experience Cloud サイトで動作。5 つの表示、Apex 不要。
MultiDatePick をブラウザで今すぐ試す
架空の会社 ACME Financial の公開 Salesforce サイトで、本物のコンポーネントが動いています。日付と空いている時間枠を選び、状況の色分けやバックオフィスを確認できます。1 時間ごとにリセットされます。
Salesforce で複数の日付を選択できるようにする
標準の Salesforce 日付項目に入るのは 1 つの日付だけ。Date コンポーネントなら、ユーザーが選んだ分だけ保持できます。
| 必要なこと | 標準の日付項目 | MultiDatePick Date |
|---|---|---|
| 飛び飛びの複数の日付 | ✗日付ごとに項目が 1 つ必要 | ✓何日でもクリック |
| 開始日と終了日 | ✗2 つの日付を入力 | ✓カレンダー上をドラッグ |
| 隔週の月曜日 | ✗1 件ずつ入力 | ✓繰り返しパターン 1 つで |
| 日付ごとの状況 | ✗できない | ✓任意の選択リストで色分け |
| 後から日付を変更 | ✗レコードを 1 件ずつ編集 | ✓カレンダー上の編集モードで |
| 画面フローで使う | ✗日付ごとに入力欄が 1 つ | ✓テキストコレクションまたは期間の JSON |
クリック、ドラッグ、繰り返し: 日付を選ぶ 3 つの方法
3 つの方法を 1 回の選択で組み合わせられます。「元に戻す」と「すべてクリア」はいつでもワンクリック。
ただの日付ピッカーではありません
60 以上のプロパティを、すべてクリックで設定。主なものは次のとおりです。

状況の色分け
任意の選択リスト値を色に対応付け。状況が 2 つある日は両方を表示。

2 か月表示
2 か月を並べて表示。長い期間や四半期の計画に。

編集モード
保存済みの日付の承認、移動、削除を、カレンダー上で一括処理。
- 任意の項目を表示するホバーポップアップ
- 任意のオブジェクトからブロック日付
- 選択できる最も早い日と最も遅い日
- 選択できる日数の上限
- 事前に選択された日付
- 特定の日付だけを選択可能に
- 保存時に 2 つ目の選択リスト
- レコード名を自動設定
- 週の開始を月曜日に
- 小・中・大
- 9 言語
- WCAG 2.1 AA
同じ日付レコードを 5 つの表示で
レコードも保存処理も同じ。既定の表示は View で設定し、ほかの表示は Available Views(利用可能な表示) で提供します。
どの日?
- 1 か月単位で、すべての日に状況の色を表示
- クリックかドラッグで選択
- 日にカーソルを合わせるとレコードを表示
- 既定の表示
各期間はどれくらい続く?
- 横に日付
- 期間は連続した 1 本のバーで表示
- 週または月にズーム。表示期間は Timeline Window (Days) で設定
今週の予定は?
- 7 日間を横に並べて表示
- 日付レコードは終日の帯に表示
- 時刻を追加するなら Date Time コンポーネント
いちばん忙しい日は?
- 日ごとのレコード数をヒートマップで表示
- 混み合う週がひと目でわかる
- 日をクリックするとその週を表示
これからの予定は?
- 今後 60 日間を日付順に
- Agenda Fields(予定一覧の項目) で選んだ任意の項目を表示
- スマートフォンや概要パネルに最適
1 つのコンポーネントに 5 つのレイアウト。デモでは予定のサンプルデータを使っています。Date カレンダーは、自身の日付レコードから同じ表示を描きます。
レコードの保存方法: オブジェクトと項目のマッピング
レコードの形を選びます。保存はレコードを追加するだけで、既存のレコードを削除することはありません。
| 自社の子オブジェクト | 設定 | 例 |
|---|---|---|
| 日付を保存するオブジェクト | 子オブジェクトの API 参照名(Child Object API Name) | Trip_Date__c |
| 日付 (または期間の開始日) | 日付項目の API 参照名(Date Field API Name) | Date__c |
| 親への参照関係 | 関連項目の API 参照名(Relationship Field API Name) | Trip__c |
| 期間の終了日 任意 | End Date Field API Name | End_Date__c |
| 状況の選択リスト 任意 | Status Field + Status Colors | Status__c、Approved:green,Pending:orange |
| ホバー時の詳細 任意 | ホバー項目(Hover Popover Fields) | Name,Status__c |
| ブロック日付 任意 | Blocked Dates Object、Date Field、Filter Field | Holiday__c、Date__c |
API 名を入力する必要はありません。セットアップウィザードでは、オブジェクトも項目もすべてドロップダウンで選べます。
Salesforce 複数日付ピッカーの活用例
Date の 15 の活用例。ほとんどは Config Library に既製の設定があります。
有給休暇・休暇申請
月曜から金曜を 1 つの期間として保存。Pending、Approved、Denied がひと目でわかります。
- 期間
- 状況の色分け
- 繰り返し
オンコール当番
四半期分の隔週月曜を 2 クリックで。Primary、Backup、Swapped で管理。
- N 週ごと
- 第 1〜最終
- 既存を読み込み
イベントの出欠・参加登録
イベントの日付ごとに 1 件の出欠レコード。保存済みの出欠が表示されるので重複しません。
- 日付ごとに 1 件
- 既存を読み込み
- 状況の色分け
プロジェクトのマイルストーンと期限
マイルストーンとレビュー日を、それぞれラベル付きでプロジェクトのレコードに。
- 2 か月表示
- レコード名
施設の利用禁止日
祝日や休業日を登録。ほかのカレンダーでは自動的にグレー表示されます。
- ブロック日付
- 任意のオブジェクト
コンテンツ公開カレンダー
毎週火曜と木曜をパターン 1 つで。日付を動かすだけで日程変更。
- 繰り返し
- ホバー時のポップオーバー
- 編集モード
フィールドサービスの複数日の作業
月曜から金曜をドラッグして 1 件の作業レコードに。既存の作業が表示されるので重複を防げます。
- 期間
- 既存を読み込み
- 状況の色分け
研修・講座の受講登録
数週間にわたる講座の日程を選択。休講日はグレー表示されます。
- ブロック日付
- 繰り返し
サブスクリプションと更新の管理
更新日をまとめて登録し、「Q3 Renewal」のように自動で名前を付けます。
- 2 か月表示
- 既定のレコード名
監査・コンプライアンスのスケジュール
会計年度を通じて毎月第 1 月曜を、状況で管理。
- 毎月の第 N 週
- 状況の色分け
設備の点検・保守
各資産のレコードに点検日を登録。施設の休業日は自動で除外。
- レコードページ
- ホバー時のポップオーバー
- ブロック日付
不動産の内見可能日
物件のオープンハウスの日程を、自社サイトに参照専用の公開カレンダーとして表示。
- Experience Cloud
- 参照のみ
営業テリトリーの訪問計画
どの担当者がいつどのテリトリーにいるか。複数日の訪問は 1 件のレコードに。
- 期間
- 繰り返し
イベント会場の予約日
複数日のイベント、設営日と撤収日をそれぞれ 1 件のレコードに。
- 期間
- 状況の色分け
繰り返しのタスクの期日
10 月の毎週水曜、または毎月の最終営業日。
- 繰り返し
- 日付ごとに 1 件
Lightning ページに配置する
レコード、アプリケーション、ホーム、Experience Cloud の各ページに。フローを使わずに、日付が子レコードとして保存されます。
| ページ | 設定するもの |
|---|---|
| レコードページ | Config Name。ページのレコードが自動的に親になります。 |
| アプリケーションページとホームページ | Config Name と Static Parent Record Id。 |
| Experience Cloud | Config Name と Static Parent Record Id。Show In-Component Toast をオンに。 |
| 関連レコードのページ | Parent Record Id Field: 本当の親を指す参照項目。 |
画面フローで複数の日付を選択する
Dates を画面にドラッグし、Config Name を設定します。チェックボックスの設定はすべてセットアップウィザードの設定から読み込まれます。
| 出力 | フローが受け取るもの |
|---|---|
| Selected Dates (Output) | ISO 形式の日付のテキストコレクション: ["2026-07-10","2026-07-14"] |
| Date Ranges JSON (Output) | 隣り合う日付を期間にまとめたもの。Output Date Ranges as JSON をオンにする必要があります。 |
| Parse Date Entries from JSON | 同梱のフローアクション: JSON をループ処理できる fromDate / toDate のエントリに変換します。 |
フロー専用の設定は、オンにしない限りオフのままです: Required、Show Inline (No Button)、Output Date Ranges as JSON。パターンの詳細は 画面フローガイドをご覧ください。
仕様
Date コンポーネントの概要。
| セキュリティ | Salesforce AppExchange セキュリティレビュー合格 |
| データ | 100% ネイティブ: データは Salesforce の外に出ません。外部サーバーもコールアウトもありません。 |
| Salesforce エディション | Enterprise、Unlimited、Performance、Developer、Salesforce Platform、および業界向けクラウド。Essentials と Professional は対象外です。 |
| 利用できる場所 | 画面フロー、Lightning レコードページ、アプリケーションページ、ホームページ、Experience Cloud サイト |
| 選択方法 | 日付のクリック、ドラッグによる期間選択、繰り返しパターン |
| 繰り返しパターン | 平日、週末、カスタム日。N 週ごと。第 1、第 2、第 3、第 4、最終 |
| 保存形式 | 日付ごとに 1 件、または終了日項目を使って期間ごとに 1 件のレコード。追加のみの保存。 |
| フローの出力 | Selected Dates (ISO 形式の日付のテキストコレクション)、Date Ranges JSON + Parse Date Entries from JSON |
| 制限 | 選択できる日数の上限、最も早い日と最も遅い日、過去の日付の許可、任意のオブジェクトからのブロック日付 |
| 表示 | 5 つ: カレンダー、タイムライン、週、稼働率、予定一覧。さらに 2 か月表示のレイアウト。 |
| 言語 | 9 言語: 英語、スペイン語、フランス語、ドイツ語、イタリア語、日本語、ヒンディー語、ポルトガル語 (ブラジル)、中国語 (簡体字) |
| プロパティ | 60 以上、すべてクリックで設定。完全なリファレンス |
| セットアップ | セットアップウィザード、Lightning App Builder、Flow Builder。Apex 不要。 |
| Salesforce API バージョン | 63.0 |
1 つのプランですべてのコンポーネント
Date、Date Time、Booking のすべてが同じライセンスに含まれます。
複数日付ピッカーに関するよくある質問
簡潔な回答です。詳しくはよくある質問のページをご覧ください。
Salesforce の日付項目に複数の日付を入れられますか?
いいえ。標準の日付項目に入るのは 1 つの日付、項目 2 つでも 1 つの期間だけです。MultiDatePick は、ユーザーが選んだすべての日付を親レコードの関連子レコードとして保存するため、1 件のレコードに何件でも日付を持たせることができ、それぞれに独自の状況を付けられます。
LWC で期間を選択するには?
MultiDatePick Date コンポーネントをページに配置し、日付をドラッグするだけです。End Date Field API Name を設定すると、隣り合う日は開始日と終了日を持つ 1 件のレコードとして保存されるので、月曜から金曜は 5 件ではなく 1 件になります。カスタム LWC を作る必要はありません。
画面フローで複数の日付を選択できますか?
はい。Date コンポーネントをフロー画面にドラッグし、Config Name を設定します。Selected Dates (Output) は、選択したすべての日付を ISO 形式の日付のテキストコレクションとして返します。Output Date Ranges as JSON をオンにすれば、Parse Date Entries from JSON アクションでループ処理できる開始日と終了日を受け取れます。
隔週の月曜日のような繰り返しの日付を選べますか?
はい。「繰り返しパターンを追加」ボタンで、平日、週末、カスタム日を選び、N 週ごとに繰り返し、月の第 1、第 2、第 3、第 4、最終のいずれかに絞り込んで、開始日から終了日までの日付を選択できます。
Experience Cloud サイトで日付の公開カレンダーを表示できますか?
はい。Date コンポーネントを Experience Cloud ページに配置し、Static Parent Record Id を設定します。Existing Dates Mode を readonly にすると、保存済みの日付を訪問者に変更させずに表示できます。保存時のメッセージには Show In-Component Toast をオンにします。
MultiDatePick Date コンポーネントの料金は?
MultiDatePick は 1 ユーザーあたり月額 $20 で、クレジットカード不要の 30 日間無料トライアルがあります。Date、Date Time、Booking の各コンポーネントがすべて含まれます。
プロパティリファレンス
App Builder と Flow Builder に表示されるラベルで掲載しています。Config Name を設定すれば、これらはすべてウィザードの設定で埋まります。
全プロパティのリファレンス
セットアップ
| 設定名(Config Name) | configName | 保存済みのセットアップウィザードの設定。ほかのすべての設定を読み込みます。 |
表示
| 表示 | view | 最初に開くレイアウト: calendar (既定)、timeline、week、utilization、agenda。 |
| 利用可能な表示(Available Views) | availableViews | 切り替えボタンに表示する表示。例: calendar,timeline,agenda。空欄なら 5 つすべてを表示。 |
| タイムラインの表示期間 (日)(Timeline Window (Days)) | timelineWindowDays | タイムラインに一度に表示する日数。既定は 14。0 で 1 か月全体。 |
| タイムラインのズーム(Timeline Zoom) | timelineZoom | 最初のズーム: day、week (既定)、month。 |
| Agenda Fields | agendaFields | 予定一覧の各行に追加する項目。空欄なら Hover Popover Fields を使用。 |
表示設定
| Button Label フロー | label | ピッカーを開くボタンのテキスト。既定は「日付を選択」。 |
| Calendar Title | modalTitle | カレンダー上部のタイトル。既定は「日付を選択」。 |
| Show Inline | showInline | ボタンなしでカレンダーを常に表示。ページでは既定でオン、フローではオフ。 |
| Two-Month View | twoMonthView | 2 か月を並べて表示。 |
| カレンダーサイズ(Calendar Size) | calendarSize | tiny、xsmall (Very Small)、small、medium (既定)、large。Tiny と Very Small はユーティリティバー、サイドバー、ダッシュボードのタイルに収まります。 |
| Day Header Format | dayHeaderFormat | 3 = SUN MON、2 = SU MO、1 = S M。 |
| Week Starts on Monday | weekStartsOnMonday | 週の始まりを日曜ではなく月曜にします。 |
| 繰り返しパターンを表示(Show Recurring Pattern Button) | showRecurringPattern | 「繰り返しパターンを追加」ボタン。既定でオン。 |
| Show Selection Summary | showSelectedSummary | 選択した日付の件数と期間。既定でオン。 |
| Show Done Button in Inline Mode | showDoneButtonInline | 「完了」でカレンダーを概要カードに折りたたみます。既定ではフローでオン、ページでオフ。 |
| Required フロー | required | フローを先に進めるには、日付を 1 つ以上選ぶ必要があります。 |
制限
| Max Dates Allowed | maxSelections | ユーザーが選べる日付の最大数。0 = 無制限。 |
| Allow Past Dates | allowPastDates | オフ = 今日以降のみ。既定でオン。 |
| Earliest Selectable Date フロー | minDate | 選択できる最初の日付。 |
| Latest Selectable Date フロー | maxDate | 選択できる最後の日付。 |
| Book Up To (Days Ahead) | maxDaysAhead | 今日からこの日数先までの期間で、毎日先に進みます。0 は制限なし。 |
| Minimum Notice (Hours) | minNoticeHours | 現在からこの時間数以内に始まる日付は選べません。24 なら少なくとも 1 日前の予約が必要です。 |
| Pre-Selected Dates フロー | defaultDates | 開いたときにすでに選択されている日付 (YYYY-MM-DD)。 |
| Blocked Dates フロー | disabledDates | 選択できない日付。グレー表示されます。 |
| Only These Dates Are Selectable フロー | availableDates | それ以外の日付はすべて無効になります。公判期日や講座の日程などに。 |
| Auto-Jump to First Available Date フロー | autoJumpToFirstAvailable | 選択できる最初の日付がある月で開きます。 |
状況と色
| 状況項目(Status Field) | statusField | 各日付を色分けする選択リストまたはテキスト項目。 |
| 状況の色(Status Colors) | statusColors | 例: Approved:green,Pending:orange,Denied:red。色名または 16 進コード。 |
| Status Color Display | statusColorDisplay | calendar: 日付のセルが状況の色になります。 |
| Status Field Label | statusFieldLabel | 状況の選択欄のラベル。空欄なら項目名を使用。 |
| Selectable Statuses (Status Picker) | selectableStatuses | ユーザーが設定できる値。例: 公開サイトなら Requested。値が 1 つなら選択欄は非表示。 |
| Ignored Statuses | hideBookingsWithStatus | カレンダーに表示しない状況。例: Cancelled。 |
| Second Picklist Field | secondStatusField | 保存時に選ぶ 2 つ目の選択リスト。例: Reason__c。色分けはされません。 |
| Second Picklist Label | secondStatusFieldLabel | 2 つ目の選択リストのラベル。 |
| Selectable Second-Picklist Values | selectableSecondStatuses | 選択できる値。値が 1 つなら自動で適用され、非表示になります。 |
| ホバー項目(Hover Popover Fields) | hoverFields | ホバーカードに表示する項目。例: Name,Status__c。 |
| Show In-Component Toast | showSuccessToast | コンポーネント内に表示する保存メッセージ。Experience Cloud で使用します。 |
| Show Add to Calendar After Saving | showAddToCalendar | 保存後、日付ごとの終日の予定を含む .ics ファイルを 1 つ提供。Outlook、Google、Apple のカレンダーに対応。 |
| Success Toast Message (optional) | successToastMessage | 保存時のカスタムメッセージ。 |
編集モード
| 編集モードを有効化(Enable Edit Mode) | enableEditMode | 編集ボタン: 保存済みの日付の状況変更、移動、削除。既定でオン。 |
| Edit Button Label | editButtonLabel | 編集ボタンのカスタムテキスト。 |
| Edit Record Display | editRecordDisplay | 各行に表示する詳細とその順序: name、status、date。既定は name, status, time。 |
レコード名
| Record Name Field | recordNameField | 各レコードの名前を保存するテキスト項目。 |
| Default Record Name | defaultRecordName | 例: 「休暇」や「オンコール」。 |
| Append Date to Record Name | appendDateTimeToName | 「休暇 - 2026-07-10」のようになります。既定でオン。 |
レコードの保存
| 子オブジェクトの API 参照名(Child Object API Name) | relatedObjectApiName | 各日付を保存するオブジェクト。 |
| 日付項目の API 参照名(Date Field API Name) | dateFieldApiName | そのオブジェクトの日付項目。 |
| End Date Field API Name | endDateField | 隣り合う日付を、開始日と終了日を持つ 1 件のレコードとして保存します。 |
| 関連項目の API 参照名(Relationship Field API Name) | relationshipFieldApiName | 各レコードから親への参照関係。 |
| Parent Record Id フロー | recordId | 保存先の親。例: {!recordVar.Id}。空欄 = 出力のみ。 |
| Static Parent Record Id ページ | staticRecordId | アプリケーションページ、ホームページ、Experience ページ用の親。 |
| Parent Record Id Field | parentRecordIdField | ページが別のレコードのものである場合に、本当の親を指す参照項目。 |
| Load Existing Dates | preloadExistingDates | 読み込み時に保存済みの日付を表示。既定でオン。 |
| Existing Dates Mode | preloadMode | editable (既定) または readonly。 |
| 保存ボタンラベル(Save Button Label) | saveButtonLabel | 保存ボタンのテキスト。既定は「保存」。 |
ブロック日付オブジェクト
| Blocked Dates Object | blockedDatesSourceObject | 日付をブロックするオブジェクト。例: 祝日。 |
| Blocked Dates Date Field | blockedDatesDateField | そのオブジェクトの日付項目。 |
| Blocked Dates Filter Field | blockedDatesFilterField | このレコードへの参照項目、または絞り込みに使う項目。空欄なら全員に対してブロック。 |
| Blocked Dates Filter Value | blockedDatesFilterValue | 絞り込み項目が一致すべき値。例: Holiday。 |
フローの出力
| Output Date Ranges as JSON フロー | outputAsJson | Date Ranges JSON (Output) に値を設定します。 |
| Selected Dates (Output) | selectedDates | 選択したすべての日付 (ISO 形式、YYYY-MM-DD)。 |
| Date Ranges JSON (Output) | selectedDateRangesJson | 隣り合う日付を fromDate / toDate にまとめたもの。 |
ユーザーに必要な日付をすべて選べるように
Salesforce AppExchange で近日公開。公開当日にお知らせします。
ご質問や機能のご要望は Support@MultiDatePick.com まで