> 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 Cloud コンポーネントで、Experience Sites ページ上のインタラクティブなカレンダー表示に Salesforce レコードをイベントとして表示します。 ポータルユーザーに、予約、予定タスク、イベント登録、プロジェクトの締め切り、または日付ベースのレコードを表示するのに使用します。ユーザーはイベントを月、週、日、または予定表形式で表示でき、イベントをクリックして詳細を表示したり、レコードへ移動したりできます。 顧客の予約スケジュール、イベントカレンダー、サービス予約ビュー、プロジェクトのタイムライン、またはポータルユーザーが日付に基づくアクティビティを視覚的なカレンダー形式で確認する必要があるあらゆる場面に最適です。 ## 設定 ### データソース 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 週間の予定をひと目で確認できます。 * **月表示:** 月全体をより広く把握でき、2〜4 週間を一度に表示したり、任意の週数を指定したりできます。 #### **期間の設定方法** 各期間（日、週、月）にはそれぞれ設定があります: * **ラベル:** その期間にわかりやすい名前を付けます（例: 「勤務週」）。 * **アイコン名:** 期間をすばやく識別できるように視覚的なアイコンを選択します。 * **単位:** この期間が日、週、月のどれを表すかを選択します。 * **スパン:** 表示する単位数を設定します（例: 5 日、2 週間）。 #### **タイムラインヘッダー（タイムライン表示のみ）** タイムライン表示のヘッダーを調整して、週番号、日付、月など、自分にとって最も重要な情報を表示します。 ### **利用可能時間** 利用可能時間セクションでは、カレンダーに表示される時間帯をカスタマイズするための複数のオプションを提供します。この機能は、特定の関心期間に集中したい場合に便利です。利用可能なオプションは次のとおりです:
属性説明
日このオプションでは、カレンダーに表示する曜日を指定できます。選択すると、選んだ曜日のみが表示され、残りは非表示になります。
月日オプションと同様に、カレンダーに表示する月を選択できます。
時間枠時間枠を使うと、カレンダーに表示する時間を正確に制御でき、最も重要な時間帯に絞って表示できます。
### **イベント表示** イベント表示セクションでは、カレンダーイベントの視覚的な見た目をカスタマイズするためのさまざまなオプションを提供します。 利用可能なオプションは次のとおりです: * **テーマ**：このオプションでは、イベントのビジュアルテーマを選択できます。既定、透明、ライン、ホロウ、角丸など、いくつかのプリセットテーマから選べ、それぞれが独自の見た目で、好みやブランドイメージに合わせられます。 * **パレット**：この機能を使うと、選択したパレットから異なる色を各リソースに割り当てられます。カラーパレットは、一貫した色の使い方をさまざまなリソースに提供する色の集合です。これにより、カレンダー上で異なる種類のリソースを視覚的に区別し、すばやく識別しやすくなります。 * **ポップオーバー項目**：ユーザーがイベントにカーソルを合わせると、これらの項目が小さなポップアップボックス（「ポップオーバー」）に表示されます。これにより、クリックしなくても重要なイベント詳細を確認できます。 ### **フィルター** Avonni カレンダーに表示されるイベントをユーザーがどのように絞り込むかをカスタマイズします。 * **リソースフィルターを非表示:** このオプションを選ぶと、特定のリソース（例: 人、部屋、機器）に基づいてイベントを表示できるフィルターを削除します。 * **日付ピッカーを非表示:** これを選択すると、特定の日付へ移動できるヘッダー上のカレンダーアイコンを削除します。 * **種類（水平、ポップオーバー、左パネル、右パネル、垂直）:** フィルターセクションの見た目と配置を決定します: * **水平:** カレンダー上部を横切るバー。 * **ポップオーバー:** クリックすると開くコンパクトなフィルター。 * **左/右パネル:** フィルターオプション用のサイドパネル。 * **垂直:** フィルターオプションの縦リスト ### **検索** * **検索を表示:** このオプションを有効にすると、Avonni カレンダーの上部に検索ボックスを追加でき、ユーザーは特定のイベントをすばやく見つけられます。 * **プレースホルダー:** 「イベントを検索…」などの短いフレーズを追加して、カレンダー内で何を検索できるのかをユーザーに案内します。 * **配置（左、右、中央、フィル）:** カレンダーのヘッダー内のどこに検索ボックスを配置するかを選び、最適な見た目にします。 ## インタラクション Avonni カレンダーコンポーネントは、イベントを表示するだけにとどまりません。ユーザーが直接操作し、さらに別のアクションを起動できるさまざまな方法を提供します。 ### **アクションの種類** * **新規イベントアクション:** ユーザーがカレンダー上でカーソルをドラッグして新しいイベントを予定するときに、何が起こるかをカスタマイズします。たとえば、イベント作成フォームを自動的に開くことができます。 * **ヘッダーアクション:** カレンダーのツールバーにカスタムボタンを追加します。これらのボタンには、以下に挙げる利用可能な操作のいずれかを実行するよう設定できます。 * **コンテキストメニューアクション:** これらのボタンは、ユーザーがイベントを右クリックしたとき、またはイベント詳細を開いたときに表示されます。イベントの編集、削除、関連する追加プロセスの起動などを許可するアクションを設定できます。 ### **利用可能な操作** Avonni カレンダーコンポーネントでは、上記のアクションから起動できるいくつかの操作を利用できます: * [**トーストを表示**](/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)**:** アクションを確認するようユーザーに求める確認ダイアログを表示します（例: イベントの削除）。 * [**Flow ダイアログを開く**](/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/open-flow-dialog.md)**:** Salesforce Flow を起動し、複雑なプロセスを自動化したり、複数のステップをユーザーに案内したりできます。 * **クエリを更新:** Salesforce の最新データでカレンダー表示を更新します。 ### **実装方法** これらのアクションと操作を設定するには、Experience Cloud Builder の Avonni カレンダーコンポーネント設定内で作業します。各アクション種別（新規イベント、ヘッダー、コンテキストメニュー）には、起動する操作を定義するセクションがあります。 ## スタイリング {% tabs %} {% 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 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.