AX - カレンダー
概要
AX - カレンダー Experience Sites ページ上のインタラクティブなカレンダービューで、Salesforce レコードをイベントとして表示する Experience Cloud コンポーネントです。
ポータルユーザーに、予定、予約済みタスク、イベント登録、プロジェクトの締め切り、または日付に基づくレコードを表示するのに使用します。ユーザーはイベントを月、週、日、またはアジェンダ形式で表示でき、イベントをクリックして詳細を確認したり、レコードに移動したりできます。
顧客の予約スケジュール、イベントカレンダー、サービス予約ビュー、プロジェクトのタイムライン、またはポータルユーザーが日付ベースのアクティビティを視覚的なカレンダー形式で確認する必要があるあらゆる場面に最適です。
設定
データソース
Avonni カレンダーコンポーネントを設定するうえで不可欠なこのステップでは、カレンダー項目と Salesforce 環境内の関連データとの接続を確立します。
データソースによって、カレンダーに表示される情報が決まります。
データソースの使用には 2 つの方法があります
手動
イベントとリソースをカレンダーインターフェースに直接手動で入力します。
単発イベント、またはカレンダーを Salesforce データにリンクする必要がない場合。
クエリ
Salesforce データからイベントとリソースの情報を自動的に取得します。カスタムクエリを作成して、任意の Salesforce オブジェクトのデータを表示できます。
カレンダーに常に Salesforce レコードの最新情報を表示したい場合。
手動:
イベントとリソースをカレンダーインターフェース内に直接追加します。
単発イベントや、データを Salesforce にリンクする必要がない場合に便利です。
クエリ:
Salesforce データから情報を直接取得します。
カスタムクエリを作成して、任意の Salesforce オブジェクトのデータをカレンダーに表示します。
カレンダーに Salesforce の最新情報を反映させたい場合に最適です。
クエリデータソースの設定
Avonni カレンダーに最も関連性の高い情報を表示するには、データの取得元を設定する必要があります。このプロセスでは、適切な Salesforce オブジェクトを選択し、必要に応じてフィルター、グループ化、並べ替えを適用して結果を絞り込みます。
手順を見ていきましょう:
オブジェクトの選択: まず、カレンダーに表示したいレコードを含む特定の Salesforce オブジェクト（例: Events、Tasks、カスタムオブジェクトなど）を選択します。
オプションのフィルタリング: 選択したオブジェクトのデータの一部のみを表示したい場合は、フィルタ機能を使用して特定の条件を設定します。たとえば、「Confirmed」のイベントのみや、特定の日付範囲内のレコードのみを表示するようにフィルタできます。
グループ化（任意）: データをグループ化して、カレンダーを効果的に整理します。たとえば、リソースフィールド（部屋、所有者、チームなど）でグループ化すると、イベントがそれぞれのリソース行に分かれます。
並べ替え: 「順序」フィールドと方向（昇順または降順）を選択して、イベントの表示順を決定します。
追加フィールド: 表示や操作に直接使用されないフィールドをカレンダーに含める必要がある場合は、「追加フィールド」セクションに追加します。これは特に、カレンダーの検索バーで検索対象にしたいフィールドに便利です。
データマッピング
データマッピングは、Salesforce レコードのイベントが Avonni カレンダーに正しく表示されるようにするための鍵です。Salesforce の情報を、カレンダーが理解できる言語に変換するようなものだと考えてください。
必須のマッピング
設定が必要な代表的なマッピングを見ていきましょう:
タイトル: イベント名またはタイトルを含む Salesforce フィールド（例: 標準の Event オブジェクトの「Subject」）。
リソース名: イベントが割り当てられているリソースを示すフィールド（例: 部屋予約の「Room」フィールドや、営業予約の「Owner」フィールド）。これを空欄にすると、すべてのイベントがまとめて表示されます。
開始: イベントの開始日時を保持する Salesforce フィールド（例: 「StartDateTime」）。
終了: イベントの終了日時を保持する Salesforce フィールド（例: 「EndDateTime」）。
例:
会議室予約カレンダーを作成する場合は、次のフィールドをマッピングするとよいでしょう:
タイトル: 会議件名
リソース名: 部屋名
開始: 予定開始
終了: 予定終了
一般設定
API 名 コンポーネントを参照するために使用される一意の識別子です。 開始日 カレンダーを開く日付を設定します。 週の開始日 各週がどの曜日から始まるかを設定し、 タイムゾーンを表示 カレンダーのタイムゾーンを表示します。
選択済み表示
Avonni カレンダーは、さまざまなスケジュール管理や整理の好みに対応するため、3 種類の表示形式を提供します。各形式には、イベントやリソースを表示・操作する独自の方法があります。
カレンダー
これは、最も多くの人がカレンダーと聞いて思い浮かべる、従来のグリッドベースの表示です。
アジェンダ
一覧の各項目にはイベントの詳細が含まれ、時系列順に並びます。
タイムライン
選択した期間にわたるスケジュールを、線形の視覚表現でユーザーに提供します。
タイムラインのバリエーション
Avonni カレンダーでは、タイムラインビューを 2 通りの方法で表示できます:
水平タイムライン:
イベントは画面上で水平方向に配置され、タイムラインは左から右へ流れます。
長期間（例: 数週間や数か月）の予定を視覚化するのに最適です。
垂直タイムライン:
イベントは縦に積み重ねて表示され、タイムラインは上から下へ流れます。
この表示は、1 日または数日以内の詳細なスケジュールを確認するのに適しています。
非表示の表示
「非表示の表示」オプションを使うと、ユーザーが Avonni カレンダーを操作する際に特定のビューを選択できなくなります。
画面に合わせる
「画面に合わせる」設定は、スクロールせずにすべての予定イベントが画面内に収まるよう、カレンダー表示を自動的に調整します。仕組みと最も役立つ場面は次のとおりです:
仕組み
カレンダーは、選択したビュー（日、週など）に合わせて時間軸を縮小または拡大し、すべてのイベントを収めます。
利点
概要をすばやく確認: 予定されているすべてのイベントをひと目で確認できます。
スクロール不要: イベントを探すために上下にスクロールする必要がありません。
注意点
イベントが多い場合や非常に小さい画面では、圧縮表示により個々のイベント詳細が見づらくなることがあります。
ツールバーのオプション
ツールバータイトル: カレンダーのヘッダーにカスタムタイトルを設定します。これにより、ユーザーはカレンダーの目的を理解しやすくなります（例: 「営業チームの予定」、「今後のイベント」など）。
ツールバータイトルのテキストスタイル: そのタイトルのタイポグラフィを設定します: フォントファミリー、サイズ、太さ、色。
ツールバーを非表示: ツールバー全体を非表示にして、よりすっきりした見た目にしたり、カレンダーの表示スペースを最大化したりできます。
ツールバーアバター
ツールバーアバターセクションでは、Avonni カレンダーのヘッダーに画像を追加できます。これにより、カレンダーを個別化し、視覚的な識別をしやすくできます。
時間範囲の制御
Avonni カレンダーの時間範囲設定では、イベントの表示や予定管理を柔軟に行えます。次のオプションから選択できます:
日ビュー: 1 日に集中することも、連続した複数日（例: 4 日間の勤務週）を表示するようにカスタマイズすることもできます。
週ビュー: 1 週間の予定をひと目で確認できます。
月ビュー: 月全体をより広く把握でき、1 回に 2〜4 週間またはカスタムの週数を表示できます。
時間範囲の設定方法
各時間範囲（日、週、月）には設定があります:
ラベル: 「勤務週」など、時間範囲にわかりやすい名前を付けます。
アイコン名: 時間範囲をすぐ識別できるよう、視覚的なアイコンを選択します。
単位: この時間範囲が日、週、月のどれを表すかを選択します。
範囲: 表示する単位数を設定します（例: 5 日、2 週）。
タイムラインヘッダー（タイムラインビューのみ）
週番号、日付、月など、最も重要な情報を表示するようにタイムラインビューのヘッダーを細かく調整できます。
利用可能時間
利用可能時間セクションでは、カレンダーに表示される時間枠をカスタマイズするための複数のオプションを利用できます。この機能は、特定の関心期間に絞り込むのに便利です。利用可能なオプションは次のとおりです:
日
このオプションでは、カレンダーに表示する曜日を指定できます。選択すると、カレンダーには選んだ曜日のみが表示され、他は非表示になります。
月
曜日オプションと同様に、カレンダーに表示する月を選択できます。
時間帯
時間帯を使用すると、カレンダーに表示する時間を正確に制御でき、最も重要な時間枠に絞り込めます。
イベント表示
イベント表示セクションでは、カレンダーイベントの見た目をカスタマイズするためのさまざまなオプションを提供します。
利用可能なオプションは次のとおりです:
テーマこのオプションでは、イベントのビジュアルテーマを選択できます。default、transparent、line、hollow、rounded など、いくつかのプリセットテーマから選べ、それぞれ独自の見た目で、個人の好みやブランドアイデンティティに合わせられます。
パレットこの機能では、選択したパレットから各リソースに異なる色を割り当てられます。カラーパレットは、さまざまなリソース間で一貫した色の使用を可能にする色のコレクションです。これにより、カレンダー上で異なる種類のリソースを視覚的に区別し、すばやく識別できます。
ポップオーバーフィールドユーザーがイベントにカーソルを合わせると、これらのフィールドが小さなポップアップ बॉックス（「ポップオーバー」）に表示されます。これにより、クリックせずに重要なイベント詳細を確認できます。
フィルター
Avonni カレンダーに表示されるイベントをユーザーがどのように絞り込むかをカスタマイズします。
リソースフィルターを非表示: このオプションを選択すると、特定のリソース（例: 人、部屋、設備）に基づいてイベントを表示するフィルターを削除できます。
日付ピッカーを非表示: これを選択すると、ヘッダー上のカレンダーアイコンを削除し、ユーザーが特定の日付に移動できなくなります。
タイプ（水平、ポップオーバー、左パネル、右パネル、垂直）: フィルターセクションの見た目と配置を決定します:
水平: カレンダー上部のバーです。
ポップオーバー: クリックすると開くコンパクトなフィルターです。
左/右パネル: フィルターオプション用のサイドパネルです。
垂直: フィルターオプションの縦リスト
検索
検索を表示: このオプションを有効にすると、Avonni カレンダーの上部に検索ボックスが追加され、ユーザーは特定のイベントをすばやく見つけられます。
プレースホルダー: 「イベントを検索...」のような短い文を追加して、ユーザーがカレンダー内で何を検索できるかを案内します。
配置（左、右、中央、埋める）: 最適な見た目になるよう、検索ボックスをカレンダーのヘッダー内のどこに配置するかを選択します。
インタラクション
Avonni カレンダーコンポーネントは、単にイベントを表示するだけではありません。ユーザーが直接操作したり、さらに別のアクションを起動したりするためのさまざまな方法を提供します。
アクションの種類
新規イベントアクション: ユーザーがカレンダー上でカーソルをドラッグして新しいイベントを予定する際に、何が起こるかをカスタマイズします。たとえば、イベント作成フォームを自動的に開くことができます。
ツールバーアクション: カレンダーのツールバーにカスタムボタンを追加します。これらのボタンには、以下に一覧表示されている任意のインタラクションを起動するよう設定できます。
コンテキストメニューアクション: これらのボタンは、ユーザーがイベントを右クリックしたとき、またはイベント詳細を開いたときに表示されます。編集、削除、イベントに関連する追加処理の起動などの操作ができるように設定します。
利用可能なインタラクション
Avonni カレンダーコンポーネントでは、上記のアクションから起動できるいくつかのインタラクションを利用できます:
トーストを表示: 簡単な通知メッセージをユーザーに表示し、アクションの確認やフィードバックを提供します。
移動: Experience Cloud 内の別ページまたは外部 वेबसाइटにユーザーをリダイレクトします。
アラートモーダルを開く: 重要な情報や確認プロンプトを含むポップアップウィンドウを表示します。
確認を開く: ユーザーにアクションの確認を求める確認ダイアログを表示します（例: イベントの削除）。
フローダイアログを開く: Salesforce Flow を起動し、複雑なプロセスを自動化したり、複数のステップをユーザーに案内したりできます。
クエリを更新: Salesforce の最新データでカレンダー表示を更新します。
実装方法
これらのアクションとインタラクションを設定するには、Experience Cloud Builder 内の Avonni カレンダーコンポーネント設定を使用します。各アクションタイプ（新規イベント、ツールバー、コンテキストメニュー）には、起動するインタラクションを定義できるセクションがあります。
スタイリング
幅: カレンダーの横幅を設定します。固定値（ピクセル、パーセンテージ）を使用するか、コンテナに合わせてカレンダーを調整できます。
高さ: この設定はカレンダーの縦の高さを設定します。幅と同様に、固定または柔軟な高さ設定を使用できます。
オーバーフロー: カレンダーが自分のサイズを超えるコンテンツをどのように処理するかを決定します。オプションには次のようなものがあります:
表示: コンテンツがカレンダーの外側に表示されます。
非表示: コンテンツはカレンダーの端で切り取られます。
スクロール: コンテンツがはみ出すと、カレンダーにスクロールバーが表示されます。
背景色: この設定は、カレンダーのツールバー（通常はナビゲーションボタン、表示切り替えなどを含む領域）の背景色を設定します。
最終更新
役に立ちましたか？