Salesforce AppExchange で近日公開

Salesforce カレンダー表示 5 種類を 1 つのコンポーネントで

実際に聞かれるスケジュールの疑問の半分は、月表示のグリッドでは答えにくいものです。表示を 4 つ追加した理由と、その切り替えを作り直しではなく設定項目 1 つにした経緯を紹介します。

公開日 2026 年 8 月 21 日 · 更新日 2026 年 10 月 21 日 · MultiDatePick

カレンダーといえば、まず月表示のグリッドを思い浮かべます。ところが使い始めると、グリッドでは答えにくい質問が出てきます。「木曜の午後に空いているのは誰?」「来週、会議室 4 は埋まっている?」「定員オーバーの技術者は?」データはすべてグリッドの中にあります。ただ、探し回らないと見つからないのです。

MultiDatePick は同じレコードを 5 通りに表示できるようになりました。コンポーネントは 1 つ、項目マッピングも保存処理も 1 つで、View 設定でレイアウトが変わります。

MultiDatePick で Salesforce の予約を 5 つの表示で確認: リソースタイムライン、月表示カレンダー、稼働率ヒートマップ、週グリッド、予定一覧
1 つのコンポーネントに 5 つのレイアウト。どの表示も同じ項目を読み、同じ方法で保存します。

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

各表示は 1 つの質問のために作られています。中身は同じレコードで、その質問に合った形で描きます。

カレンダー

14 日には何がある?

1 か月単位で表示し、各日に予約の状況を表示します。複数の状況が混在する日は、そのすべてを表示。これが既定の表示で、たいていの場合は今でもこれが正解です。

操作可能
MultiDatePick の Salesforce カレンダー表示のアニメーションデモ: アドバイザーを選ぶと月全体が状況の色で塗られ、日にカーソルを合わせるとその日の予定を顧客名、時刻、状況付きでカード表示
タイムライン

どのリソースがいつ空いている?

縦にリソース、横に日付。3 日にまたがる予約は 1 本のバーで描かれ、重なる予約は段に分かれて積み重なり、定員バーで各日の埋まり具合がわかります。1 日から 1 か月までズームでき、バーをドラッグして移動や延長ができます。タイムライン表示について詳しく。

操作可能
MultiDatePick の Salesforce リソースタイムラインのアニメーションデモ: 縦にアドバイザー、複数日の案件は 1 本のバーで表示。案件にカーソルを合わせてカードを表示し、週から月にズームしてページ送り
週

木曜の 14 時に空いているのは誰?

横に 7 日間、縦に営業時間。各予約は実際の長さどおりの大きさで表示されます。重なる予約はそれぞれの状況の色で横に並び、隣の余白は空けたままなので、もう 1 件追加できます。

操作可能
MultiDatePick の Salesforce 週表示のアニメーションデモ: アドバイザーを選ぶと顧客との面談が状況の色のブロックで実際の長さどおりに表示され、ホバーカードで顧客、面談の種類、状況を確認
稼働率

定員を超えているのは誰?

リソースごと・日ごとに、定員に対する予約数を 1 つの青のグラデーションで表示します。予約超過の日はオレンジの枠で囲まれ、合計行でチーム全体を集計。セルをクリックすると、そのリソースの週表示に移ります。稼働率ヒートマップについて詳しく。

参照専用
MultiDatePick の Salesforce 稼働率ヒートマップのアニメーションデモ: 縦にアドバイザー、日ごとに予約数/定員を表示。満員の日にカーソルを合わせ、クリックするとそのアドバイザーの週を表示
予定一覧

次の予定は?

今後 60 日間を日付ごとにまとめたシンプルな一覧。時刻、状況、選んだ項目を表示します。スマートフォンでもシフトの引き継ぎでも読みやすい表示です。

参照専用
MultiDatePick の Salesforce 予定一覧のアニメーションデモ: 今後の予定を日付順に、時刻、顧客、状況ラベル、アドバイザー付きで一覧表示し、2 件にホバーカードを表示

稼働率と予定一覧は、あえて参照専用にしています。予約を受け付けるのではなく、質問に答えるための表示だからです。ほかの 3 つは完全に操作できます。

表示は 5 つ、予約の定義は 1 つ

よくある話では、ここで 2 つ目のコンポーネントが登場します。専用の項目、専用の保存ロジック、そして専用のバグ。MultiDatePick では 5 つの表示すべてが同じ項目マッピングで同じレコードを読み、同じ競合ルールとブロック日付に従い、同じ保存処理で書き込みます。予約の定義が 1 つしかないので、カレンダーからタイムラインに切り替えても予約の意味が変わることはありません。

制御する設定は 2 つです。

表示

コンポーネントを開いたときのレイアウト: カレンダー、タイムライン、週、稼働率、予定一覧のいずれか。

利用可能な表示(Available Views)

切り替えボタンに表示する表示の一覧。空欄なら 5 つすべてを表示し、そのページに合う 2 つだけに絞ることもできます。

こうして 1 つのコンポーネントが 3 種類のツールになります。採用担当者の面接日程ページは週表示で開きます。面接は時間帯の問題だからです。施設管理者の会議室予約ページはカレンダーで開き、タイムラインと稼働率も選べるようにします。会議室は定員の問題だからです。壁掛けディスプレイは予定一覧で開き、書き込みできる表示は一切出しません。

既定の表示は常に切り替えボタンに表示されます。Available Views(利用可能な表示) に入れていなくても同じです。一覧には追加の表示だけを書けばよいので、「表示を絞ったら自分の既定の表示まで消えた」という混乱が起きません。

表示は配置ごとに選ぶ

組織全体で 1 つのカレンダー設定では、ほとんど役に立ちません。1 つの会社が 1 つの質問をしているわけではないからです。営業は来週を、オペレーション部門は来四半期を、シフト管理者は今日を時間単位で見たい。経理は稼働率の数字が欲しいのです。

View はコンポーネントを配置するたびに設定します。MultiDatePick を 4 つのレコードページ、フロー画面、ホームページ、公開 Experience Cloud サイトに置けば、同じオブジェクトをそれぞれ別の表示で見せられます。2 回目のインストールも、同期を保つべき項目マッピングもありません。

タイムラインには専用の設定が 2 つあります。

設定機能API 参照名
タイムラインの表示期間 (日)(Timeline Window (Days)) 一度に画面に表示する日数。既定は 14 日です。1 か月分の列を並べると予約 1 件あたり約 20 ピクセルの幅しかなく、ラベルがすべて切れてしまうため、表示を読みやすく保つためにこの期間があります。1 か月全体を表示したい場合は 0 に設定します。 timelineWindowDays
リソース行の最大数(Max View Resources) 描画するリソース行の数 (予約の多い順)。80 室もの会議室が並んで、表示が壁のようになるのを防ぎます。 maxViewResources

1 つのリソースに重なる予約が複数ある場合、その行は件数付きの 1 本の帯に折りたたまれ、クリックすると予約ごとの段に展開されます。表示の密度は、データに押し付けられるものではなく、ユーザーが選ぶものになります。

MultiDatePick の Salesforce タイムラインでの日程変更のアニメーションデモ: 案件の右端をドラッグして 2 日延長し、別の案件をドラッグして 2 日後にずらす。いずれもドロップ時に保存され、新しい日付がバーに表示される
日程変更はドラッグするだけ。端を引っ張れば予約を延長し、中央をつかめば移動します。ドラッグ中は新しい日付がバーに表示され、離した時点で保存されます。

リソース参照先を User にすれば、人のスケジュール管理に

リソースの参照先はどのオブジェクトにもできます。会議室なら会議室予約、機材なら貸出管理。User を指定すれば、上のすべての表示が人員配置ツールになります。タイムラインは勤務表、週はシフト表、稼働率はチームの稼働状況ダッシュボードに。マネージャーが「定員オーバーは誰?」と問うのは、会議室よりも人についてのほうがはるかに多いのです。

担当者をリソースにした MultiDatePick の Salesforce タイムライン表示: 縦にアドバイザー、横に日付、各案件を 1 本のバーで表示
人をリソースに。ここに並ぶ行はすべて人です。Resource Object API Name を User に設定すれば、自分のチームのメンバーが同じように行に並びます。
試すときの実用的な注意点が 2 つあります。User には標準の定員項目がないため、稼働率を件数ではなくパーセントで表示したい場合はカスタム項目を追加してください。また、Business Hours Start Field(営業時間開始項目) と Business Hours End Field(営業時間終了項目) に User の項目を指定すると、週グリッドは組織共通の時間帯ではなく、一人ひとりの勤務時間に従います。

まさにこの用途のための設定がライブラリに 2 つ用意されています。稼働率ヒートマップで開く チームのキャパシティ計画 と、タイムラインで開く スタッフのシフト表 です。どちらも User をリソースとして使います。

ライブラリのすべての設定に、表示があらかじめ設定済み

既定の表示をどれにするかは判断が必要で、一から決めるより真似するほうが簡単です。そこで Config Library のすべての設定に、既定の表示と切り替え一覧の両方を、その設定の本来の用途に合わせて指定しました。

面接・予約の設定週1 日の時間帯で開く
会議室・デスク・車両・ラボの設定タイムライン稼働率誰が何を使っていて、どれだけ埋まっているか
休暇、利用禁止期間などの期間タイムライン複数日のレコードを 1 本のバーで表示
日付のみの設定カレンダー予定一覧予定一覧を参照専用の相棒に
定員項目があるものすべて稼働率定員に対するパーセント
既定の表示は常に書き込みできる表示です。参照専用の表示を既定にすると設定の本来の役割が隠れてしまうため、稼働率と予定一覧は必ず追加の選択肢として提供します。

どれでもインポートして項目名を自社のスキーマに合わせれば、表示の選択もそのまま引き継がれます。

コンポーネントは 1 つ。表示は 5 つ。2 回目のインストールは不要。

ライブデモで 5 つの表示をすべて切り替えてみるか、Config Library で各シナリオがどの表示で開くかを確認してください。

  • $20/ユーザー/月ですべての機能
  • 30 日間無料、カード不要
  • 100% Salesforce ネイティブ
  • Apex 不要
  • Salesforce AppExchange で近日公開