Microsoft Graph Toolkit の議題コンポーネント

ユーザーまたはグループの予定表のイベントを表す mgt-agenda Web コンポーネント。 既定では、予定表には、当日の現在サインインしているユーザー イベントが表示されます。 コンポーネントは、Microsoft Graph からイベントを返す任意のエンドポイントを使用することもできます。

次の例では、mgt-agenda コンポーネントを使用して、サインインしたユーザーの予定表イベントを表示しています。 コード エディターを使用して、プロパティ がコンポーネントの動作をどのように変更させるかを確認することができます。

この例を mgt.dev で開きます。

プロパティ

既定では、mgt-agenda コンポーネントは /me/calendarview エンドポイントからイベントを取得し、現在の日のイベントを表示します。 この動作を変更するために使用できるプロパティがいくつかあります。

属性 プロパティ 説明
date date Microsoft Graph から取得するイベントの開始日を表す文字列。 値は、Date コンストラクター で解析できる形式でなければなりません。event-query 属性が設定されている場合、値は影響を受けません。
Microsoft Graph から取得する日数 - 規定値は 3 - event-query 属性が設定されている場合、値は影響を受けません。
show-max showMax 表示するイベントの最大数を示す数値。 既定値は設定されていません (最大値なし)。
group-id groupId 現在サインインしているユーザーの予定表の代わりに使用するグループ予定表の文字列 ID。
event-query eventQuery Microsoft Graph からイベントを取得する場合に使用する代替クエリを表す文字列。 必要に応じて、文字列の最後に委任されたスコープを | で区切って追加することもできます (/groups/GROUP-ID-GUID/calendar/calendarView | group.read.all)。
イベント イベント コンポーネントによってレンダリングされるイベントのリストを取得または設定するためのイベントの配列 - このプロパティを使用して、コンポーネントによって読み込みされたイベントにアクセスします。 この値を設定すると、独自のイベントを読み込むことができます。開発者が値を設定した場合、datedaysevent-query 属性は影響を受けません。
group-by-day groupByDay 日ごとにイベントをグループ化するためのブール値 - 既定ではイベントはグループ化されません。
preferred-timezone preferredTimezone Microsoft Graph から、Pacific Standard Time などのイベントを取得する場合に使用するタイム ゾーンの名前を指定します。 既定では、この属性は UTC タイム ゾーンを使用します。 現在のユーザーの優先タイム ゾーンは、me/mailboxSettings エンドポイントを呼び出して timeZone プロパティの値を読み込むことで取得できます。

次の例では、特定の日付と最大 3 日間のデータを取得するコンポーネントの動作を変更しています。

<mgt-agenda
  group-by-day
  date="May 7, 2019"
  days="3"
  ></mgt-agenda>

次の例では、特定のクエリからデータを取得するコンポーネントの動作を変更しています。

<mgt-agenda
  event-query="/me/events?orderby=start/dateTime"
  ></mgt-agenda>

メソッド

メソッド 説明
reload() メソッドを呼び出して、そのプロパティに基づいて新しいデータの可能性のあるコンポーネントをリロードします。

CSS カスタム プロパティ

mgt-agenda コンポーネントは、これらの CSS カスタム プロパティを定義します

mgt-agenda {
  --event-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.092);
  --event-margin: 0px 10px 14px 10px;
  --event-padding: 8px 0px;
  --event-background-color: #ffffff;
  --event-border: solid 2px rgba(0, 0, 0, 0);

  --agenda-header-margin: 40px 10px 14px 10px;
  --agenda-header-font-size: 24px;
  --agenda-header-color: #333333;

  --event-time-font-size: 12px;
  --event-time-color: #000000;

  --event-subject-font-size: 19px;
  --event-subject-color: #333333;

  --event-location-font-size: 12px;
  --event-location-color: #000000;
}

詳細については、「コンポーネントのスタイリング」を参照してください。

テンプレート

mgt-agenda コンポーネントは、いくつかの テンプレート をサポートしており、コンポーネントの特定の部分を置き換えることができます。 テンプレートを指定するには、コンポーネントの内部に <template> 要素を含め、data-type の値を以下のいずれかに設定します。

データ型 データ コンテキスト 説明
default events: イベント オブジェクトのリスト 既定のテンプレートは、コンポーネント全体を独自のものに置き換えます。
event eventイベントオブジェクト 各イベントのレンダリングに使用されるテンプレート。
event-other eventイベントオブジェクト 各イベントの追加コンテンツをレンダリングするために使用されるテンプレートです。
header header: 文字列 各日のヘッダーをレンダリングするために使用されるテンプレートです。
loading データ コンテキストはパスされません データの読み込み時に使用するテンプレートです。
no-data データ コンテキストはパスされません 連絡可能なイベントがないときに使用するテンプレートです。

以下の例では、event テンプレートの使用方法を説明します。

<mgt-agenda>
  <template data-type="event">
    <button class="eventButton">
      <div class="event-subject">{{ event.subject }}</div>
      <div data-for="attendee in event.attendees">
        <mgt-person
          person-query="{{ attendee.emailAddress.name }}"
          view="twolines">
        </mgt-person>
      </div>
    </button>
  </template>
  <template data-type="no-data">
    There are no events found!
  </template>
</mgt-agenda>

詳細については、「テンプレート」を参照してください。

イベント

制御から次のイベントが発生します。

イベント いつ出力されるか カスタム データ キャンセル カスタム テンプレートを使用する
eventClick ユーザーはイベントをクリックまたはタップします。 選択した イベント いいえ いいえ はい(カスタム イベント テンプレートを使用)

イベントの処理の詳細については、「 イベント」を参照してください。

Microsoft Graph のアクセス許可

このコンポーネントは、以下の Microsoft Graph API とアクセス許可を使用します。

構成 アクセス許可 API
default Calendars.Read /me/calendarview

このコンポーネントでは、呼び出す別の Microsoft Graph クエリを指定することができます (/groups/{id}/calendar/calendarView など)。 この場合、| で区切られた文字列の最後にアクセス許可を追加します。

既定のテンプレートと既定の renderAttendees テンプレートを使用する場合は、追加の API とアクセス許可が必要です。 このコンポーネントの既定のテンプレートは、出席者を持ち、すべてのアクセス許可を継承するイベントに mgt-people コンポーネントを使用します。

認証

このログイン制御は、認証ドキュメント に記述されているグローバル認証プロバイダーを使用します。

キャッシュ

コンポーネントは mgt-agenda データをキャッシュしません。

より制御を行うために拡張する

より複雑なシナリオや真にカスタムな UX のために、このコンポーネントは、コンポーネント拡張でオーバーライドするためのいくつかのprotected レンダリング* メソッドを公開しています。

メソッド 説明
renderLoading コンポーネントの読み込みが行われている間、読み込み状態をレンダリングします。
renderNoData 空のデータ状態をレンダリングします。
renderGroups イベント データをグループにソートし、グループ ヘッダーで表示します。
renderHeader グループ ヘッダーをレンダリングします。
renderEvents イベント オブジェクトのリストを取得します。
renderEvent 単一のイベントとそのすべての部分をレンダリングします。
renderTitle イベント タイトルの一部をレンダリングします。
renderLocation イベントの場所の一部をレンダリングします。
renderAttendees イベント参加者の一部をレンダリングします。
renderOther 追加のイベント コンテンツをレンダリングします。