# AX - カレンダー ## 概要 **AX - カレンダー** Experience Cloud コンポーネントで、Experience Sites ページ上に Salesforce レコードを対話型カレンダーのイベントとして表示します。 ポータルユーザに予定、予定されたタスク、イベント登録、プロジェクトの期限、または日付ベースの任意のレコードを表示するために使用します。ユーザは月、週、日、またはアジェンダ形式でイベントを表示でき、イベントをクリックして詳細を確認したりレコードに移動したりできます。 顧客の予約スケジューリング、イベントカレンダー、サービス予約ビュー、プロジェクトのタイムライン、またはポータルユーザが視覚的なカレンダーフォーマットで日付に基づくアクティビティを確認する必要があるあらゆる場所に最適です。 ## **Salesforce データに接続** Avonni カレンダーコンポーネントを設定する際の重要な手順であり、カレンダー項目と Salesforce 環境内の関連データとの接続を確立します。 データソースはカレンダーに表示される情報を決定します。
データソースを使用する方法は2つあります
オプション説明最適な使用例
手動イベントとリソースをカレンターインターフェースに直接手動で入力します。一度だけのイベント、またはカレンダーを Salesforce データに連動させる必要がない場合。
クエリSalesforce データからイベントとリソース情報を自動的に取得します。カスタムクエリを作成して任意の Salesforce オブジェクトのデータを表示できます。カレンダーに常に Salesforce レコードの最新情報を表示したい場合に使用します。
* **手動：** * カレンダーのインターフェース内で直接イベントとリソースを追加します。 * 一回限りのイベントやデータを Salesforce にリンクする必要がない場合に便利です。 * **クエリ：** * Salesforce データから情報を直接取得します。 * カスタムクエリを作成して、任意の Salesforce オブジェクトのデータをカレンダーに表示します。 * カレンダーが Salesforce の最新情報を反映する必要がある場合に最適です。 ### クエリデータソースの構成 Avonni カレンダーに最も関連性の高い情報を表示させるために、データの取得元を構成する必要があります。このプロセスには適切な Salesforce オブジェクトの選択と、結果を絞り込むためのフィルター、グループ化、並び替えのオプション設定が含まれます。 手順を分解すると次のとおりです： * **オブジェクトの選択：** まず、カンバンボードに表示したいデータを含む特定の Salesforce オブジェクト（例：取引先、商談、カスタムオブジェクトなど）を選択します。 * **オプションのフィルタリング：** 選択したオブジェクトからデータの一部のみを表示したい場合は、フィルタ機能を使って特定の条件を設定します。たとえば、「オープン」の商談のみや特定の地域内の取引先のみを表示するようにフィルタリングできます。 * **グルーピング（任意）：** データをグループ化してカンバンボードを効果的に整理します。たとえば、商談を「フェーズ」でグループ化すると「見込み」「交渉中」などの列が作成されます。 * **ソート：** カンバンカードの表示順を決定するために、「並び替え」フィールドと方向（昇順または降順）を選択します。 * **追加フィールド：** 表示や操作に直接使用されないフィールドをカンバンに含める必要がある場合は、「追加フィールド」セクションにそれらを追加します。これはカンバンの検索バー内で検索可能にしたいフィールドに特に有用です。 ### データマッピング データマッピングは、Salesforce レコードのイベントが Avonni カレンダーに正しく表示されることを保証するための重要な要素です。Salesforce の情報をカレンダーが理解できる形式に翻訳するようなイメージです。 **必須のマッピング** ここでは、設定する必要がある最も一般的なマッピングの内訳を示します： * **タイトル：** イベント名またはタイトルを含む Salesforce のフィールド（例：標準の Event オブジェクトの "Subject"）。 * **リソース名：** イベントが割り当てられているリソースを示すフィールド（例：会議室予約のための「Room」フィールドや、営業の予定の「Owner」フィールド）。ここが空欄の場合、すべてのイベントが一緒に表示されます。 * **開始：** イベントの開始日時を保持する Salesforce のフィールド（例："StartDateTime"）。 * **終了：** イベントの終了日時を保持する Salesforce のフィールド（例："EndDateTime"）。 **例：** 会議室予約カレンダーを作成する場合、次のフィールドをマッピングすることが考えられます： * **タイトル：** 会議の件名 * **リソース名：** 部屋名 * **開始：** 予定された開始 * **終了：** 予定された終了 ## 設定 ### **選択表示** Avonni カレンダーは、さまざまなスケジューリングや整理の好みに対応するために3つの異なる表示形式を提供します。各形式はイベントとリソースの表示および操作の独自の方法を提供します。
選択表示説明イメージ
カレンダーこれは、ほとんどの人がカレンダーと結びつける伝統的なグリッドベースのビューです。
アジェンダ一覧の各項目にイベントの詳細が含まれ、時系列順に並べられます。
タイムラインユーザに選択可能な期間にわたるスケジュールの線形ビジュアル表現を提供します。
### タイムラインのバリエーション Avonni カレンダーは、タイムラインビューを表示する2つの方法を提供します： * **水平タイムライン：** * イベントが画面上に水平に配置され、タイムラインが左から右へ進みます。 * 数週間や数か月など長期間のスケジュールを視覚化するのに最適です。 * **垂直タイムライン：** * イベントが垂直に積み重なり、タイムラインが上から下へ進みます。 * このビューは、1日または数日の詳細なスケジュールを確認するのに適しています。 *** ### 非表示表示 「非表示表示」オプションは、ユーザが Avonni カレンダーとやり取りする際に特定のビューを選択できないようにします。 *** ### フィットにズーム "Zoom to Fit" 設定は、スクロールせずに画面上ですべての予定イベントが収まるようにカレンダービューを自動調整します。仕組みと有用な場面は次のとおりです： **仕組み** * カレンダーは選択した表示（日、週など）内のすべてのイベントを収めるためにタイムスケールを縮小または拡大します。 **利点** * **クイック概要：** 予定されているすべてのイベントを一目で確認できます。 * **スクロール不要：** イベントを見つけるために上下にスクロールする必要がなくなります。 **注意点** * イベントが多い場合や非常に小さい画面では、圧縮表示により個々のイベントの詳細が読みづらくなる可能性があります。 *** ### ツールバーオプション * **ツールバータイトル：** カレンダーのヘッダーにカスタムタイトルを設定します。これにより、ユーザがカレンダーの目的を理解しやすくなります（例：「営業チームのスケジュール」「今後のイベント」など）。 * **ツールバーを非表示：** より洗練された外観を実現したり、カレンダー表示領域を最大化したりするためにツールバー全体を非表示にできます。 *** ### **アクション機能** Avonni カレンダーコンポーネントは単にイベントを表示するだけでなく、ユーザが直接操作してさらにアクションをトリガーできるさまざまな方法を提供します。 #### **アクションの種類** * **新規イベントアクション：** ユーザがカレンダー上でドラッグして新しいイベントをスケジュールしたときに何が起こるかをカスタマイズします。たとえば、自動的にイベント作成フォームを開くようにできます。 * **ヘッダーアクション：** カレンダーのツールバーにカスタムボタンを追加します。これらのボタンは下記の利用可能な操作をトリガーするようにプログラムできます。 * **コンテキストメニューアクション：** ユーザがイベントを右クリックしたりイベント詳細を開いたときにこれらのボタンが表示されます。編集、削除、またはイベントに関連する追加プロセスをトリガーするなどの操作をこれらのボタンに設定できます。 #### **利用可能なインタラクション** Avonni カレンダーコンポーネントは、上記のアクションによってトリガーできるいくつかのインタラクションを提供します： * [**トーストを表示**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/puropatipaneru/cao-zuo/tsutowo)**:** ユーザに対して簡潔な通知メッセージを表示し、操作を確認したりフィードバックを提供したりします。 * [**ナビゲート**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/puropatipaneru/cao-zuo/yi-dong)**:** ユーザを Experience Cloud 内の別ページや外部ウェブサイトにリダイレクトします。 * [**アラートモーダルを開く**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/puropatipaneru/cao-zuo/artomdaruwoku)**:** 重要な情報や確認プロンプトを表示するポップアップウィンドウを表示します。 * [**確認ダイアログを開く**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/puropatipaneru/cao-zuo/woku)**:** ユーザに操作の確認を求める確認ダイアログを表示します（例：イベントの削除）。 * [**フローダイアログを開く**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/puropatipaneru/cao-zuo/furdaiaroguwoku)**:** Salesforce Flow を起動し、複雑なプロセスを自動化したり、ユーザを複数のステップにわたって案内したりできます。 * **クエリを更新：** Salesforce の最新データでカレンダー表示を更新します。 #### **実装方法** これらのアクションとインタラクションを構成するには、Experience Cloud Builder 内の Avonni カレンダーコンポーネントの設定を操作します。各アクションタイプ（新規イベント、ヘッダー、コンテキストメニュー）にはトリガーするインタラクションを定義するセクションがあります。 *** ### アバター アバターのセクションでは、Avonni カレンダーのヘッダーに写真や画像を追加できます。これによりカレンダーを個人化したり視覚的な識別子を提供したりできます。 *** ### **時間範囲のコントロール** Avonni カレンダーの時間範囲設定は、イベントの表示とスケジュール管理に柔軟性を提供します。次のオプションから選択できます： * **日表示：** 単一の日に集中するか、複数の連続した日（例：4日間の勤務週）を表示するようにカスタマイズできます。 * **週表示：** 1週間分のスケジュールを一望できます。 * **月表示：** 月のより広い概要を取得でき、2〜4週分、またはカスタムの週数を同時に表示することが可能です。 #### **時間範囲の設定方法** 各時間範囲（日、週、月）には設定があります： * **ラベル：** 時間範囲に説明的な名前を付けます（例：「勤務週」）。 * **アイコン名：** 時間範囲を素早く識別するための視覚的なアイコンを選択します。 * **単位：** この時間範囲が日、週、または月のどれを表すかを選択します。 * **範囲：** 表示する単位の数を設定します（例：5日、2週間）。 #### **タイムラインヘッダー（タイムラインビューのみ）** 週番号、日付、月など、最も重要な情報を表示するようにタイムラインビューのヘッダーを微調整します。 *** ### **利用可能な時間** 利用可能な時間セクションでは、カレンダーに表示される時間枠をカスタマイズするための複数のオプションを提供します。この機能は特定の期間に焦点を当てたいときに便利です。利用可能なオプションは次のとおりです：
属性説明
日このオプションでは、カレンダーに表示する曜日を指定できます。選択すると、選択された曜日のみが表示され、他は非表示になります。
月日オプションと同様に、カレンダーに表示する月を選択できます。
時間枠時間枠を使用すると、カレンダーに表示される時間帯を正確に制御でき、最も重要な時間帯に焦点を絞ることができます。
*** ### **イベント表示** イベント表示セクションでは、カレンダーイベントの視覚的な見た目をカスタマイズするためのさまざまなオプションを提供します。 利用可能なオプションは次のとおりです： * **テーマ**：このオプションでは、イベントのビジュアルテーマを選択できます。デフォルト、透明、ライン、ホロー、ラウンドなどのプリセットテーマから選択でき、それぞれが異なる視覚スタイルを提供します。 * **パレット**：この機能では、選択したパレットの色を各リソースに割り当てることができます。カラーパレットは一貫した色の使用を提供する色のコレクションで、カレンダー上の異なる種類のリソースを視覚的に区別して素早く識別するのに役立ちます。 * **ポップオーバーフィールド**：ユーザがイベントにカーソルを合わせたときに、小さなポップアップボックス（または「ポップオーバー」）にこれらのフィールドが表示されます。これにより、ユーザはクリックせずに重要なイベントの詳細を確認できます。 ### **フィルター** ユーザが Avonni カレンダーに表示されるイベントをどのように絞り込むかをカスタマイズします。 * **リソースフィルターを非表示：** ユーザが特定のリソース（例：人、部屋、機器）に基づいてイベントを表示するフィルターを削除するにはこのオプションを選択します。 * **日付ピッカーを非表示：** ユーザが特定の日付に移動するためのヘッダー上のカレンダーアイコンを削除するにはこれを選択します。 * **タイプ（水平、ポップオーバー、左パネル、右パネル、垂直）：** フィルターセクションの視覚スタイルと配置を決定します： * **水平：** カレンダーの上部にわたるバー。 * **ポップオーバー：** クリックで開くコンパクトなフィルター。 * **左/右パネル：** フィルターオプション用のサイドパネル。 * **垂直：** 縦方向のフィルターオプションのリスト ### **検索** * **検索表示：** このオプションを有効にすると、Avonni カレンダーの上部に検索ボックスが追加され、ユーザが特定のイベントを素早く見つけられるようになります。 * **プレースホルダー：** ユーザにカレンダー内で何を検索できるかを案内する短いフレーズ（例：「イベントを検索...」）を追加してください。 * **配置（左、右、中央、フィル）：** 最適な視覚レイアウトのために、カレンダーのヘッダー内で検索ボックスをどこに配置するかを選択します。 ## スタイリングの外観 ### **サイズ** * **幅:** カレンダーの横幅を設定します。固定値（ピクセル、パーセンテージ）を使用するか、コンテナに基づいてカレンダーを適応させることができます。 * **高さ:** この設定はカレンダーの縦の高さを設定します。幅と同様に、固定または柔軟な高さを使用できます。 * **オーバーフロー:** コンテンツがカレンダーの寸法を超えた場合の処理方法を決定します。オプションには次のようなものがあります： * **表示:** コンテンツがカレンダーの外側に流れる。 * **非表示:** コンテンツがカレンダーの端でクリップされる。 * **スクロール:** コンテンツがオーバーフローした場合にカレンダーにスクロールバーが表示される。 ### **ツールバー** * **背景色:** この設定は通常ナビゲーションボタンや表示選択などを含むカレンダーのツールバーの背景色を設定します。