---
title: "イベントカレンダーとイベントリストのレンダリングを追加してください"
slug: "add-an-event-calendar-and-an-event-list-rendering"
abstract: "SXAレンダリングを使ってサイト上のイベントを表示しましょう。"
---
# イベントカレンダーとイベントリストのレンダリングを追加してください

ウェブサイトにカレンダーを追加するのは、今後のイベントを表示するのに最適な方法です。SXAには、今後のイベントをウェブサイトでお知らせするための2つのレンダリング機能があります:イベントリストとイベントカレンダーです。

イベントカレンダーレンダリングは、カレンダー内のイベントリストからイベントを表示します。イベントリストレンダリングは、イベント名、説明、場所、開始・終了時刻、リンクを含むイベントのリストを表示します。

## イベントカレンダーのレンダリングを追加・設定する

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

イベントカレンダーのレンダリングを追加・設定するには:

1.  ツールボックスの **イベント** セクションからイベント **カレンダー** のレンダリングをページにドラッグします。
2.  「 **関連コンテンツ選択** 」ダイアログボックスで、欲しいコンテンツアイテムをクリックし、「 **作成」** をクリックして新しいイベントを作成します。
3.  **コントロールプロパティ**のダイアログボックスで、以下を設定できます:
    -   **Calendar settings** - **AgendaWeek**、**AgendaDay**、**Month**、**Week**、または**Day**を選択してカレンダービューの見た目を指定します。これらのタイプそれぞれがカレンダービューに特定のコントロールを追加します。例えば、**Month**, **Week**, **Day**のタイプを追加すると、ユーザーがカレンダービューを変更できるボタンが追加されます。
        
        ![Calendar settings](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/SXA-Event-change-to-month.png)
        
    -   **「前回の表示 次へ** 」 - カレンダーに前回および次回のボタン(矢印)を追加する選択を選択します。
        
        ![Add arrows to the calendar](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/SXA-Event-next-button.png)
        
    -   **月間キャプション表示** - 現在の視聴キャプションを表示するために選択。
        
        ![Example of the month caption view](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/SXA-Event-month-captions.png)
        
    -   **Compact View** - コンパクトビューを選択する。コンパクトビューではイベントはカレンダーにマークされますが、訪問者がマークされた日付にカーソルを合わせた時のみ表示されます。
        
        これはイベントカレンダーイベント用のGoogleカレンダーXMLフィードURLが指定されていない場合にのみ機能します。GoogleカレンダーフィードURLが指定されているかどうかを確認するには、イベントカレンダーフローティングツールバーの **「Googleカレンダープロパティ編集** 」アイコンをクリックしてください。
        

## イベントリストのレンダリングを追加・設定

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

イベントリストのレンダリングを追加・設定するには:

1.  ツールボックスの **イベント** セクションからイベント **リスト** のレンダリングをページにドラッグします。
    
2.  **「関連コンテンツ選択**」ダイアログボックスで、欲しいコンテンツアイテムをクリックし、「OK」または「**作成**」をクリックして新しいイベントを作成してください。
    
3.  イベントフィールドをクリックして、ページ上で直接イベントを編集してください。
    
    ![Add events directly](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/SXA-Event_list.PNG)
    

## コンテンツエディターでイベントを追加する

新しいイベントを追加すると:

1.  コンテンツエディターで */sitecore/content///Data*に移動します。
    
2.  **イベント**を右クリックし、**挿入**をクリックしてイベント**リスト**をクリックします。
    
3.  名前を入力して**OK**をクリックします。
    
4.  新しいイベントリストには以下の詳細を指定してください:
    
    フィールド
    
    概要
    
    タイトル
    
    作成時に指定されたイベントリストの名前。
    
    イベントの種類
    
    ドロップダウンリストから利用可能なイベントタイプを選択します。イベントタイプはプレゼンテーションノード内で定義されています。
    
    GoogleカレンダーAPIキー
    
    カレンダーフィードのキーを入力します。空のままの場合、カレンダーはイベントリストアイテムノードで定義されたイベントからデータを取得します。
    
    GoogleカレンダーID
    
    Googleカレンダーアプリケーションで、所有または購読しているカレンダーの一意識別子を入力してください。
    
5.  イベントを追加するには、作成したばかりのイベントを右クリックし、「 **挿入** 」をクリックして「 **カレンダーイベント**」をクリックします。名前を入力して **「OK」**をクリックします。
    

## コンテンツエディターでイベントタイプを追加してください

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

新しいイベントタイプを追加するには:

1.  コンテンツエディターで*sitecore/content///Presentation*に移動します。
    
2.  **イベントタイプ**を右クリックし、「**挿入**」をクリックし、「**イベントタイプ**」をクリックします。
    
3.  名前を入力して**OK**をクリックします。
    
4.  新しいイベントタイプについては以下の詳細を指定してください:
    
    フィールド
    
    概要
    
    価値
    
    クラス名を入力してください。
    
    許可されているレンダリング
    
    クラスが適用されるコンポーネントを選択してください。