> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-calendar.md). # AX - カレンダー ## 概要 **AX - カレンダー** Experience Sites ページ上のインタラクティブなカレンダー表示に Salesforce レコードをイベントとして表示する Experience Cloud コンポーネントです。 ポータルユーザーの予約、予定タスク、イベント登録、プロジェクトの締切、または日付ベースのレコードを表示するために使用します。ユーザーはイベントを月、週、日、またはアジェンダ形式で表示でき、イベントをクリックして詳細を確認したり、レコードへ移動したりできます。 顧客の予約スケジュール、イベントカレンダー、サービス予約ビュー、プロジェクトのタイムライン、またはポータルユーザーが日付に基づくアクティビティを視覚的なカレンダー形式で確認する必要があるあらゆる場面に最適です。 ## **Salesforce データに接続** Avonni Calendar コンポーネントを設定するうえでのこの重要な手順では、カレンダー項目と Salesforce 環境内の関連データとの接続を確立します。 データソースによって、カレンダーに表示される情報が決まります。
データソースの使用方法は 2 つあります
オプション説明最適な用途
手動イベントとリソースをカレンダーのインターフェースに直接手動で入力します。単発のイベントや、カレンダーを Salesforce データと連携する必要がない場合。
クエリSalesforce のデータからイベントとリソースの情報を自動的に取得します。任意の Salesforce オブジェクトのデータを表示するカスタムクエリを作成できます。カレンダーに Salesforce レコードの最新情報を常に表示したい場合。
* **手動:** * イベントとリソースをカレンダーのインターフェース内で直接追加します。 * 単発のイベントや、データを Salesforce にリンクする必要がない場合に便利です。 * **クエリ:** * Salesforce データから情報を直接取得します。 * 任意の Salesforce オブジェクトのデータをカレンダーに表示するカスタムクエリを作成します。 * カレンダーに Salesforce の最新情報を反映させたい場合に最適です。 ### クエリデータソースの設定 Avonni Calendar に最も関連性の高い情報を表示するには、データの取得元を設定する必要があります。このプロセスでは、適切な Salesforce オブジェクトを選択し、必要に応じてフィルター、グループ化、並べ替えを適用して結果を絞り込みます。 手順を見ていきましょう: * **オブジェクトの選択:** Kanban ボードに表示するデータが含まれている特定の Salesforce オブジェクト（例: Accounts、Opportunities、カスタムオブジェクトなど）を選択することから始めます。 * **任意のフィルタリング:** 選択したオブジェクトからデータの一部だけを表示したい場合は、フィルタリング機能を使って特定の条件を設定します。たとえば、「Open」の Opportunity のみを表示したり、特定の地域内の Account のみを表示したりできます。 * **グループ化（任意）:** データをグループ化して、Kanban ボードを効果的に整理します。たとえば、Opportunity を「Stage」でグループ化すると、「Prospecting」「Negotiation」などの列を作成できます。 * **並べ替え:** 「Order By」項目と昇順または降順を選択して、Kanban カードの表示順を決定します。 * **追加フィールド:** 表示や操作に直接使わない項目を Kanban に含める必要がある場合は、「追加フィールド」セクションに追加します。これは特に、Kanban の検索バーで検索対象にしたい項目に有効です。 ### データマッピング データマッピングは、Salesforce レコードのイベントを Avonni Calendar に正しく表示するための鍵です。Salesforce の情報を、カレンダーが理解できる言語に変換するようなものだと考えてください。 **必須のマッピング** 設定が必要な、最も一般的なマッピングを以下に示します: * **タイトル:** イベント名またはタイトルを含む Salesforce フィールド（例: 標準 Event オブジェクトの「Subject」）。 * **リソース名:** イベントがどのリソースに割り当てられているかを示すフィールド（例: 会議室予約なら「Room」フィールド、営業の予定なら「Owner」フィールド）。これを空欄にすると、すべてのイベントがまとめて表示されます。 * **開始:** イベントの開始日時を保持する Salesforce フィールド（例: 「StartDateTime」）。 * **終了:** イベントの終了日時を保持する Salesforce フィールド（例: 「EndDateTime」）。 **例：** 会議室予約カレンダーを作成する場合は、次のフィールドをマッピングできます: * **タイトル:** 会議件名 * **リソース名:** 会議室名 * **開始:** 予定開始 * **終了:** 予定終了 ## 設定 ### **選択した表示** Avonni Calendar には、さまざまな予定管理や整理の好みに対応するため、3 つの異なる表示形式があります。各形式は、イベントやリソースを確認・操作するための独自の方法を提供します。
選択した表示説明画像
カレンダーこれは、ほとんどの人がカレンダーとして連想する従来のグリッドベースの表示です。
アジェンダリスト内の各項目にはイベントの詳細が含まれ、時系列順に並びます。
タイムライン選択した期間にわたる予定を、直線的に視覚化して表示します。
### タイムラインのバリエーション Avonni Calendar では、タイムライン表示を 2 通りの方法で表示できます: * **水平タイムライン:** * イベントは画面上に水平に配置され、タイムラインは左から右へ進みます。 * より長い期間（例: 週や月）にわたる予定の可視化に最適です。 * **垂直タイムライン:** * イベントは垂直に積み重ねて表示され、タイムラインは上から下へ進みます。 * この表示は、1 日または数日内の詳細な予定を確認するのに適しています。 *** ### 非表示の表示 「非表示の表示」オプションを使用すると、Avonni Calendar を操作する際に特定の表示をユーザーが選択できなくなります。 *** ### 画面に合わせてズーム 「画面に合わせてズーム」設定は、カレンダー表示を自動的に調整し、スクロールせずにすべての予定イベントが画面に収まるようにします。仕組みと、特に役立つ場面は次のとおりです: **仕組み** * カレンダーは、選択した表示（日、週など）内のすべてのイベントに対応するよう、時間スケールを縮小または拡大します。 **利点** * **概要:** 予定されているイベントをひと目で確認できます。 * **スクロール不要:** イベントを探すために上下にスクロールする必要がありません。 **留意点** * イベント数が多い場合や画面が非常に小さい場合、圧縮表示では個々のイベントの詳細が見づらくなることがあります。 *** ### ツールバーのオプション * **ツールバーのタイトル:** カレンダーのヘッダーにカスタムタイトルを設定します。これにより、ユーザーはカレンダーの目的を理解しやすくなります（例: 「営業チームの予定」、「今後のイベント」など）。 * **ツールバーを非表示:** ツールバー全体を非表示にして、よりすっきりした見た目にしたり、カレンダーの表示領域を最大化したりできます。 *** ### **アクション機能** Avonni Calendar コンポーネントは、イベントを表示するだけでなく、ユーザーが直接操作したり、さらにアクションを起こしたりするさまざまな方法を提供します。 #### **アクションの種類** * **新規イベントアクション:** ユーザーがカレンダー上でカーソルをドラッグして新しいイベントを作成するときに何が起こるかをカスタマイズします。たとえば、イベント作成フォームを自動的に開くことができます。 * **ヘッダーアクション:** カレンダーのツールバーにカスタムボタンを追加します。これらのボタンには、以下に一覧表示されている利用可能な操作をトリガーするように設定できます。 * **コンテキストメニューアクション:** これらのボタンは、ユーザーがイベントを右クリックしたとき、またはイベント詳細を開いたときに表示されます。イベントの編集、削除、または関連する追加処理の実行などの操作ができるように設定します。 #### **利用可能な操作** Avonni Calendar コンポーネントでは、上記のアクションから実行できるいくつかの操作を利用できます: * [**トーストを表示**](/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/show-toast.md)**:** ユーザーに短い通知メッセージを表示し、アクションの確認やフィードバックを提供します。 * [**移動**](/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/navigate.md)**:** Experience Cloud 内の別ページまたは外部サイトへユーザーをリダイレクトします。 * [**アラートモーダルを開く**](/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/open-alert-modal.md)**:** 重要な情報や確認プロンプトを含むポップアップウィンドウを表示します。 * [**確認ダイアログを開く**](/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/open-confirm.md)**:** ユーザーにアクションの確認を求める確認ダイアログを表示します（例: イベントの削除）。 * [**フロー ダイアログを開く**](/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/open-flow-dialog.md)**:** Salesforce Flow を起動し、複雑なプロセスを自動化したり、複数の手順にユーザーを案内したりできます。 * **クエリを更新:** Salesforce の最新データでカレンダー表示を更新します。 #### **実装方法** これらのアクションと操作を設定するには、Experience Cloud Builder の Avonni Calendar コンポーネント設定内で作業します。各アクション種別（新規イベント、ヘッダー、コンテキストメニュー）には、トリガーする操作を定義できるセクションがあります。 *** ### アバター Avatar セクションでは、Avonni Calendar のヘッダーに画像を追加できます。これにより、カレンダーをより個性的にし、視覚的な識別子を提供できます。 *** ### **時間範囲の制御** Avonni Calendar の時間範囲設定を使うと、イベントの表示方法や予定の管理を柔軟に行えます。次のオプションから選択できます: * **日ビュー:** 1 日に集中することも、複数の連続した日を表示するようにカスタマイズすることもできます（例: 4 日間の勤務週を表示）。 * **週ビュー:** 1 週間の予定をひと目で確認できます。 * **月ビュー:** 月全体をより広く把握でき、1 回に 2〜4 週間、または任意の週数を表示できます。 #### **時間範囲の設定方法** 各時間範囲（日、週、月）には、それぞれ設定があります: * **ラベル:** 時間範囲にわかりやすい名前を付けます（例: 「勤務週」）。 * **アイコン名:** 視覚的なアイコンを選んで、時間範囲をすばやく識別できるようにします。 * **単位:** この時間範囲が日、週、月のどれを表すかを選択します。 * **範囲:** 表示する単位数を設定します（例: 5 日、2 週間）。 #### **タイムラインヘッダー（タイムラインビューのみ）** タイムラインビューのヘッダーを微調整して、週番号、日付、月など、最も重要な情報を表示します。 *** ### **利用可能な時間** 利用可能な時間セクションでは、カレンダーに表示する時間枠をカスタマイズするための複数のオプションを提供します。この機能は、特定の関心期間に集中したいときに便利です。利用可能なオプションは次のとおりです:
属性説明
日このオプションでは、カレンダーに表示する曜日を指定できます。選択すると、カレンダーには選んだ曜日のみが表示され、それ以外は非表示になります。
月日オプションと同様に、カレンダーに表示する月を選択できます。
時間帯時間帯を使うと、カレンダーに表示する時間を正確に制御でき、最も重要な時間枠に集中できます。
*** ### **イベント表示** イベント表示セクションでは、カレンダーイベントの視覚的な見た目をカスタマイズするためのさまざまなオプションを提供します。 利用可能なオプションは次のとおりです: * **テーマ**: このオプションでは、イベントのビジュアルテーマを選択できます。デフォルト、透明、線、空洞、角丸など、いくつかのプリセットテーマから選択でき、それぞれが個人の好みやブランドアイデンティティに合う独自の見た目を提供します。 * **パレット**: この機能では、選択したパレットから各リソースに異なる色を割り当てられます。色のパレットは、一貫した色の使用をさまざまなリソースに提供する色の集まりです。これにより、カレンダー上で異なる種類のリソースを視覚的に区別し、すばやく識別できます。 * **ポップオーバー項目**: ユーザーがイベントにカーソルを合わせると、これらの項目が小さなポップアップ बॉックス（または「ポップオーバー」）に表示されます。これにより、クリックせずにイベントの重要な詳細を確認できます。 ### **フィルター** Avonni Calendar に表示されるイベントの絞り込み方法をカスタマイズします。 * **リソースフィルターを非表示:** このオプションを選択すると、特定のリソース（例: 人、会議室、機器）に基づいてイベントを表示するためのフィルターが削除されます。 * **日付ピッカーを非表示:** この設定を選ぶと、ユーザーが特定の日付へ移動できるヘッダー上のカレンダーアイコンが削除されます。 * **種類（水平、ポップオーバー、左パネル、右パネル、垂直）:** フィルターセクションの見た目と配置を決定します: * **水平:** カレンダー上部の横長バーです。 * **ポップオーバー:** クリックすると開くコンパクトなフィルターです。 * **左/右パネル:** フィルターオプション用のサイドパネルです。 * **垂直:** フィルターオプションの縦リスト ### **検索** * **検索を表示:** このオプションを有効にすると、Avonni Calendar の上部に検索ボックスを追加でき、ユーザーは特定のイベントをすばやく見つけられます。 * **プレースホルダー:** カレンダー内で何を検索できるかをユーザーに示す短いフレーズ（例: 「イベントを検索...」）を追加します。 * **位置（左、右、中央、フィル）:** カレンダーのヘッダー内で検索ボックスをどこに配置するかを選び、最適な見た目にします。 ## スタイルの外観 ### **サイズ** * **幅：** カレンダーの横幅を設定します。固定値（ピクセル、パーセンテージ）を使用することも、コンテナに応じてカレンダーを自動調整することもできます。 * **高さ：** この設定では、カレンダーの縦の高さを設定します。幅と同様に、固定値または柔軟な高さ設定を使用できます。 * **オーバーフロー：** カレンダーの寸法を超えるコンテンツをどのように扱うかを決定します。オプションには次のようなものがあります: * **表示：** コンテンツがカレンダーの外側にはみ出します。 * **非表示：** コンテンツはカレンダーの端で切り取られます。 * **スクロール：** コンテンツがあふれると、カレンダーにスクロールバーが表示されます。 ### **ツールバー** * **背景色：** この設定では、カレンダーのツールバーの背景色（通常はナビゲーションボタン、表示選択などが含まれる領域）を設定します。 --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-calendar.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.