イベント リスト レンダリングとイベント カレンダー レンダリングの追加

概要

SXA レンダリングを使用して、サイトにイベントを表示します。

Web サイトにカレンダーを追加すると、今後のイベントを表示することができます。SXA は、Web サイトで今後のイベントを通知するのに役立つ 2 つのレンダリング (イベント リストとイベント カレンダー) を付属しています。

イベント カレンダーのレンダリングは、カレンダーのイベント リストからのイベントを表示します。イベント リスト レンダリングは、イベントのリストを名前、説明、場所、開始/終了時間、リンクなどとともに表示します。

イベント カレンダーのレンダリングにより、インタラクティブなカレンダー ウィジェットを使用してイベントを提示できます。さまざまなモードで動作するようにカレンダーを設定できます。たとえば、月、週、または日を一度に表示するように選択したり、ブラウジングを有効または無効にしたりできます。外部ソースからのイベントを表示することもできます。たとえば、既存の Google カレンダー フィードからイベントを取得します。

イベント カレンダー レンダリングの追加と設定を行うには、次の手順に従います。

  1. ツールボックスの [イベント] セクションで、ページに [イベント カレンダー] レンダリングをドラッグします。

  2. [関連付けられたコンテンツを選択してください。] ダイアログ ボックスで、目的のコンテンツ アイテムをクリックし、[作成] をクリックして新しいイベントを作成します。

  3. [コントロールのプロパティ] ダイアログ ボックスでは、以下を設定できます。

    • [カレンダー設定] - [議題 週]、[議題 日]、[]、[]、または [] を選択して、カレンダー ビューの外観を指定します。これらの各タイプは、カレンダー ビューに特定のコントロールを追加します。たとえば、[]、[]、[] タイプを追加すると、ユーザーがカレンダー ビューを変更できるボタンが追加されます。

      カレンダー設定
    • [前を表示/次を表示] - 選択して、カレンダーに前を表示/次を表示ボタン (矢印) を追加します。

      カレンダーに矢印を追加する
    • [月のキャプションを表示] - 選択すると、現在のビューのキャプションが表示されます。

      月キャプション ビューの例
    • [コンパクト ビュー] - コンパクト ビューを表示する場合に選択します。コンパクト ビューでは、カレンダー内でイベントにマークが付けられますが、マークが付いている日を訪問者がマウスでポイントしたときにのみ表示されます。

      これは、イベント カレンダー イベントに指定された Google カレンダー XML フィード URL がない場合にのみ機能します。Google カレンダー フィードの URL が指定されているかどうかを確認するには、イベント カレンダーにあるフローティング ツールバーの [Google カレンダーのプロパティを編集する] アイコンをクリックします。

イベント リスト レンダリングは、イベントの列挙を表示します。各エントリには、イベントの名前と日付が表示され、会場、説明、Web リンクなどの詳細が表示されます。イベントのリストは編集可能で、ページ上の情報を直接更新できます。各イベントは Sitecore でコンテンツ アイテムとして表されるため、管理が容易です。

イベント リスト レンダリングの追加と設定を行うには、次の手順に従います。

  1. ツールボックスの [イベント] セクションで、ページに [イベント リスト] レンダリングをドラッグします。

  2. [関連付けられたコンテンツを選択してください。] ダイアログ ボックスで、目的のコンテンツ アイテムをクリックし、[OK] をクリックするか、[作成] をクリックして新しいイベントを作成します。

  3. イベント フィールドをクリックして、ページ上でイベントを直接編集します。

    イベントを直接追加する

新規イベントを追加するには、以下の手順に従います。

  1. コンテンツ エディターで、/sitecore/content/<Tenant>/<Site>/Data にナビゲートします。

  2. [イベント] を右クリックし、[挿入] をクリックして [イベント リスト] をクリックします。

  3. 名前を入力して、[OK] をクリックします。

  4. 新しいイベント リストに次の詳細を指定します。

    フィールド

    説明

    タイトル

    作成時に指定されたイベント リストの名前です。

    イベント タイプ

    ドロップダウン リストから使用可能なイベント タイプを選択します。イベント タイプは、プレゼンテーション ノードの下で定義します。

    Google Calendar API キー

    カレンダー フィードのキーを入力します。空のままにすると、カレンダーはイベント リスト アイテム ノードで定義されたイベントからデータをプルします。

    Google Calendar ID

    Google Calendar アプリケーションで所有またはサブスクライブしているカレンダーの一意の識別子を入力します。

  5. イベントを追加するには、作成したイベントを右クリックし、[挿入] をクリックして [カレンダー イベント] をクリックします。名前を入力して、[OK] をクリックします。

SXA では、カレンダー イベントに特定のスタイルを設定できます。

新規イベント タイプを追加するには、以下の手順に従います。

  1. コンテンツ エディターで、sitecore/content/<Tenant>/<Site>/Presentation にナビゲートします。

  2. [イベント タイプ] を右クリックし、[挿入] をクリックして [イベント タイプ] をクリックします。

  3. 名前を入力して、[OK] をクリックします。

  4. 新しいイベント タイプに次の詳細を指定します。

    フィールド

    説明

    クラス名を入力します。

    許可されたレンダリング

    クラスを適用するコンポーネントを選択します。