> 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 - カレンダー** は、Salesforce レコードを Experience Sites ページ上の対話型カレンダービューにイベントとして表示する Experience Cloud コンポーネントです。 ポータルユーザーに、予約、予定されたタスク、イベント登録、プロジェクトの締切、または日付ベースのレコードを表示するために使用します。ユーザーはイベントを月・週・日・アジェンダ形式で表示でき、イベントをクリックして詳細を確認したり、レコードへ移動したりできます。 顧客の予約スケジュール、イベントカレンダー、サービス予約ビュー、プロジェクトのタイムライン、またはポータルユーザーが日付ベースのアクティビティを視覚的なカレンダー形式で確認する必要があるあらゆる場面に最適です。 ## 設定 ### データソース Avonni Calendar コンポーネントを構成するうえで重要なこのステップは、カレンダー項目と Salesforce 環境内の関連データとの接続を確立します。 データソースによって、カレンダーに表示される情報が決まります。
データソースを使用する方法は 2 つあります
オプション説明最適な使用例
手動イベントとリソースをカレンダーのインターフェースに直接手動で入力します。一度限りのイベント、またはカレンダーを Salesforce データにリンクする必要がない場合。
クエリSalesforce データからイベントとリソース情報を自動的に取得します。任意の Salesforce オブジェクトのデータを表示するカスタムクエリを作成できます。カレンダーに Salesforce レコードの最新情報を常に表示したい場合。
* **手動:** * イベントとリソースをカレンダーのインターフェース内に直接追加します。 * 一度限りのイベントや、データを Salesforce にリンクする必要がない場合に便利です。 * **クエリ:** * Salesforce データから情報を直接取得します。 * 任意の Salesforce オブジェクトのデータをカレンダー上に表示するカスタムクエリを作成します。 * カレンダーに Salesforce の最新情報を反映させる必要がある場合に最適です。 #### クエリデータソースの設定 Avonni Calendar に最も関連性の高い情報を表示するには、データの取得元を設定する必要があります。このプロセスでは、適切な Salesforce オブジェクトを選択し、必要に応じてフィルター、グループ化、並び替えを適用して結果を絞り込みます。 手順を見ていきましょう： * **オブジェクトの選択:** まず、カレンダーに表示したいレコードが含まれる特定の Salesforce オブジェクト（例：イベント、タスク、カスタムオブジェクトなど）を選択します。 * **オプションのフィルタリング:** 選択したオブジェクトから一部のデータのみを表示したい場合は、フィルタリング機能を使って特定の条件を設定します。たとえば、「確定済み」のイベントや、特定の日付範囲内のレコードだけを表示するように絞り込めます。 * **グループ化（オプション）:** データをグループ化して、カレンダーを効果的に整理します。たとえば、リソースフィールド（部屋、所有者、チームなど）でグループ化すると、イベントがそれぞれのリソース行に分けられます。 * **並び替え:** イベントの表示順を決めるために、「Order By」フィールドと方向（昇順または降順）を選択します。 * **追加フィールド:** 表示や操作に直接使用しないフィールドをカレンダーに含める必要がある場合は、「追加フィールド」セクションに追加します。これは、カレンダーの検索バーで検索可能にしたいフィールドに特に便利です。 ### データマッピング データマッピングは、Salesforce レコードのイベントを Avonni Calendar に正しく表示するための鍵です。Salesforce の情報を、カレンダーが理解できる言語に翻訳するようなものだと考えてください。 **必須マッピング** 設定が必要な最も一般的なマッピングを以下に示します： * **タイトル：** イベント名またはタイトルを含む Salesforce フィールド（例：標準 Event オブジェクトの「Subject」）。 * **リソース名：** イベントがどのリソースに割り当てられているかを示すフィールド（例：会議室予約用の「Room」フィールドや、営業予約用の「Owner」フィールド）。これが空欄の場合、すべてのイベントはまとめて表示されます。 * **開始：** イベントの開始日時を保持する Salesforce フィールド（例：「StartDateTime」）。 * **終了：** イベントの終了日時を保持する Salesforce フィールド（例：「EndDateTime」）。 **例：** 会議室予約カレンダーを作成する場合、次のフィールドをマッピングできます： * **タイトル：** 会議件名 * **リソース名：** 部屋名 * **開始：** 予定開始 * **終了：** 予定終了 ### 一般設定 **API 名** は、コンポーネントを参照するために使用される一意の識別子です。 **開始日** カレンダーを開く日付を設定します。 **週の開始曜日** 各週が始まる曜日を設定し、 **タイムゾーンを表示** カレンダーのタイムゾーンを表示します。 ### **選択された表示形式** Avonni Calendar には、さまざまなスケジュール管理や整理の好みに対応する 3 つの異なる表示形式があります。各形式は、イベントやリソースを表示・操作するための独自の方法を提供します。
選択された表示形式説明画像
カレンダーこれは、多くの人がカレンダーと聞いて思い浮かべる、従来のグリッド形式の表示です。
アジェンダ一覧の各項目にはイベントの詳細が含まれ、時系列順に並びます。
タイムライン選択した期間にわたるスケジュールを、直線的な視覚表現で表示します。
### タイムラインのバリエーション Avonni Calendar では、タイムライン表示を 2 通りの方法で表示できます： * **水平タイムライン：** * イベントは画面上に水平に配置され、タイムラインは左から右へ流れます。 * 長期間（例：数週間や数か月）のスケジュールを可視化するのに最適です。 * **垂直タイムライン：** * イベントは縦に積み重ねられ、タイムラインは上から下へ流れます。 * この表示は、1 日または数日以内の詳細なスケジュールを確認するのに適しています。 ### 非表示の表示形式 **非表示の表示形式** Avonni Calendar の操作時に、ユーザーが特定の表示を選択できないようにします。任意の組み合わせを選択してください **アジェンダ**, **カレンダー** と **タイムライン** — 選択したものはすべて表示切り替えメニューから消えます。 ### ICS カレンダー **ICS カレンダー** ICS ファイルからイベントを取り込みます。カレンダーごとに 1 件ずつ追加します — ICS ファイルへのリンク、または Salesforce に保存された ICS ファイルの Content Document ID のいずれか — すると、そのイベントはデータソースからのイベントと並んで表示されます。 リンクの場合、URL は Salesforce の Remote Site Setting に登録されている必要があります。登録されていないと、ファイルを取得するコールアウトがブロックされます。ICS ファイル以外を返すリンクは拒否されます。いずれの場合も、訪問者には失敗は表示されません。そのエントリからはイベントが追加されず、エラーはブラウザコンソールにのみ出力され、カレンダーの残り — 他の ICS エントリとデータソース自身のイベント — は引き続き表示されます。ICS リンクで何も読み込まれない場合は、コンソールを確認してください。 ### フィットに合わせてズーム 「フィットに合わせてズーム」設定は、すべての予定イベントがスクロールなしで画面に収まるように、カレンダー表示を自動調整します。仕組みと、最も役立つ場面は次のとおりです： **仕組み** * カレンダーは、選択した表示（日、週など）に収まるよう、時間スケールを縮小または拡大します。 **利点** * **概要をすぐ確認：** 予定されているすべてのイベントを一目で確認できます。 * **スクロール不要：** イベントを探すために上下へスクロールする必要がなくなります。 **注意点** * イベント数が多い場合や非常に小さい画面では、圧縮表示により個々のイベント詳細が読みづらくなることがあります。 ### ツールバーオプション * **ツールバーのタイトル：** カレンダーのヘッダーにカスタムタイトルを設定します。これにより、ユーザーはカレンダーの目的を理解しやすくなります（例：「営業チームの予定」「今後のイベント」など）。 * **ツールバータイトルのテキストスタイル：** そのタイトルのタイポグラフィを設定します。フォントファミリー、サイズ、太さ、色を指定できます。 * **ツールバーを非表示：** ツールバー全体を非表示にして、よりすっきりした見た目にしたり、カレンダーの表示スペースを最大化したりできます。 ### ツールバーのアバター ツールバーのアバターセクションでは、Avonni Calendar のヘッダーに画像を追加できます。これはカレンダーをパーソナライズし、視覚的な識別に役立ちます。 ### **時間範囲の属性** Avonni Calendar の **時間範囲の属性** イベントの表示とスケジュール管理に柔軟性を提供します。以下のオプションから選択できます： * **日表示：** 1 日に集中することも、連続した複数日を表示するようにカスタマイズすることもできます（例：4 日間の勤務週を表示）。 * **週表示：** 1 週間のスケジュールを一目で確認できます。 * **月表示：** 月全体をより広い視点で把握でき、2～4 週間を一度に表示したり、任意の週数を指定したりできます。 #### **時間範囲の設定方法** 各時間範囲（Day、Week、Month）には設定があります： * **ラベル:** 時間範囲に説明的な名前を付けます（例：「勤務週」）。 * **アイコン名:** 時間範囲をすばやく識別できるよう、視覚的なアイコンを選択します。 * **単位：** この時間範囲が日、週、月のどれを表すかを選択します。 * **範囲：** 表示する単位数を設定します（例：5 日、2 週）。 #### **タイムラインのヘッダー（タイムライン表示のみ）** タイムライン表示のヘッダーを細かく調整して、週番号、日付、月など、あなたにとって最も重要な情報を表示できます。 ### **利用可能な時間** 利用可能な時間セクションでは、カレンダーに表示される時間枠をカスタマイズするための複数のオプションを提供します。この機能は、特定の関心期間に焦点を当てるのに便利です。利用可能なオプションは次のとおりです：
属性説明
日このオプションでは、カレンダーに表示する曜日を指定できます。選択すると、選んだ曜日のみが表示され、それ以外は非表示になります。
月日オプションと同様に、カレンダーに表示する月を選択できます。
時間帯時間帯を使用すると、カレンダーに表示する時間を正確に制御でき、最も重要な時間帯に絞り込めます。
### **イベント表示** イベント表示セクションでは、カレンダーイベントの視覚的な外観をカスタマイズするためのさまざまなオプションを提供します。 利用可能なオプションは次のとおりです： * **テーマ**：このオプションでは、イベントの視覚テーマを選択できます — **デフォルト**, **中空**, **線**, **角丸** または **透明** — それぞれが、好みやブランドイメージに合わせた独自のビジュアルスタイルを提供します。 * **パレット**：この機能では、選択したパレットから各リソースに異なる色を割り当てられます。カラーパレットは、さまざまなリソース間で一貫した色の使用を提供する色のコレクションです。これにより、カレンダー上で異なる種類のリソースを視覚的に区別し、すばやく識別できます。 * **カスタムパレット**：代わりに独自のパレットを作成し、1 エントリにつき 1 色を設定します。これは **パレット**を上書きし、その色は同じ方法でリソースに割り当てられます。 * **ポップオーバーフィールド**：ユーザーがイベントにカーソルを合わせると、これらのフィールドが小さなポップアップボックス（「ポップオーバー」）に表示されます。これにより、クリックしなくてもイベントの重要な詳細を確認できます。各フィールドには **ラベル**、読み込むイベントフィールド、そして **値**があり、 **バリアント** ラベルを配置します（**標準**, **ラベルを非表示**, **ラベルを横並び** または **ラベルを縦並び**). * **空のリソースのイベントを非表示**：リソースのないイベントを、 **空** それ以外ではグループ化されるリソース行と、リソースフィルター内のそのエントリも非表示にします。イベントは **ICS カレンダー** その **空** 行を保持します。既定ではオフです。 ### **フィルター** Avonni Calendar に表示されるイベントを、ユーザーがどのように絞り込むかをカスタマイズします。 * **リソースフィルターを非表示：** このオプションを選ぶと、特定のリソース（例：人、部屋、機器）に基づいてイベントを表示できるフィルターを削除します。 * **日付ピッカーを非表示：** 特定の日付へ移動できるヘッダー上のカレンダーアイコンを削除するには、これを選択します。 * **種類:** フィルターセクションの視覚スタイルと配置を決定します： * **水平：** 既定の表示で、カレンダー上部に横長のバーとして表示されます。 * **ポップオーバー：** クリックすると開くコンパクトなフィルターです。 * **左パネル** / **右パネル：** フィルターオプション用のサイドパネル。以下で設定します **サイドパネル属性**. * **レコードの選択リスト値を使用：** 選択リストフィルターのオプションを、フィールドの全値セットではなく、実際にレコードに存在する値から取得します。 * **カスケード式フィルター値を使用：** ユーザーがフィルターをかける際、現在の選択に合わせて他のフィルターのオプションを絞り込みます。これは **レコードの選択リスト値を使用**. データソースにマッピングされた各フィルターには、フィルター上部のメニューから選べる演算子もあります。テキスト、選択リスト、複数選択リスト、ルックアップの各フィルターでは **等しい** （既定） **等しくない**, **空** と **空ではない**を使用できます。数値、日付、時間のフィルターでは **範囲内** （既定） **範囲外**, **等しい**, **等しくない**, **より小さい**, **以下**, **より大きい**, **以上**, **空** と **空ではない**. **空** と **空ではない** 値を取らないため、いずれかが選択されている間はフィルターの入力欄が非表示になります。チェックボックスフィルターには演算子メニューがなく、リソースフィルターにもありません。 ### **検索** * **検索を表示：** このオプションを有効にすると、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 内の別ページまたは外部 Web サイトへリダイレクトします。 * [**アラートモーダルを開く**](/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 を起動し、複雑な処理の自動化や複数ステップの案内を行えます。 * [**Open Flow Panel**](/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/open-flow-panel.md)**:** ダイアログではなく、カレンダー横のサイドパネルで Salesforce Flow を起動します。 * [**フローを実行**](/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/execute-flow.md)**:** ダイアログやパネルを表示せず、バックグラウンドで自動起動の Salesforce Flow を実行します。 * [**ダウンロード**](/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/download.md)**:** URL または Salesforce のコンテンツドキュメントからファイルをダウンロードします。 ### **実装方法** これらのアクションと操作を設定するには、Experience Cloud Builder の Avonni Calendar コンポーネント設定で作業します。各アクションタイプ（新規イベント、ツールバー、コンテキストメニュー）には、起動する操作を定義するセクションがあります。 ## スタイル {% tabs %} {% tab title="サイズ" %} * **幅:** カレンダーの横幅を設定します。固定値（ピクセル、パーセント）を使用するか、コンテナに応じてカレンダーを自動調整できます。 * **高さ:** この設定はカレンダーの縦方向の高さを設定します。幅と同様に、固定または柔軟な高さ設定を使用できます。 * **オーバーフロー:** カレンダーがサイズを超えるコンテンツをどのように処理するかを決定します。オプションには次のようなものがあります： * **表示：** コンテンツはカレンダーの外側にはみ出します。 * **非表示:** コンテンツはカレンダーの端で切り取られます。 * **スクロール：** コンテンツがあふれるとカレンダーにスクロールバーが表示されます。 {% endtab %} {% tab title="ツールバー" %} * **背景色:** この設定は、カレンダーのツールバー（通常、ナビゲーションボタンや表示形式の選択などが配置される領域）の背景色を設定します。 {% endtab %} {% tab title="フィルターパネル" %} フィルターと検索を含むサイドパネルのスタイルを設定します。 * **フィルターパネル:** 背景色 / ボーダー色 / ボーダーサイズ / ボーダースタイル / ボーダー半径。 * **フィルターパネルのラベル:** 背景 / アクティブ時の背景 / ホバー時の背景; 折りたたみアイコンの色; 色 / アクティブ時の色 / ホバー時の色; フォントサイズ / フォントウェイト。 * **フィルターパネルのオプション:** 色; チェックボックスのボーダー色; 「もっと読み込む」ボタンのテキスト色 / アクティブ時のテキスト色 / ホバー時のテキスト色。 * **フィルターパネルのリセットボタン:** 背景色 / テキスト色 / 枠線色 / 枠線サイズ / 角丸半径。 {% endtab %} {% endtabs %} --- # 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 by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` 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 what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. 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.