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

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

例

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

プロパティ

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

次の例では、特定の日付と最大 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>

CSS カスタム プロパティ

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

<mgt-agenda class="agenda" group-by-day></mgt-agenda>

.agenda {
  --agenda-event-box-shadow: 0px 2px 30px pink;
  --agenda-event-margin: 0px 10px 40px 10px;
  --agenda-event-padding: 8px 0px;
  --agenda-event-background-color: #8d696f;
  --agenda-event-border: dotted 2px white;

  --agenda-header-margin: 3px;
  --agenda-header-font-size: 20px;
  --agenda-header-color: #8d696f;

  --agenda-event-time-font-size: 20px;
  --agenda-event-time-color: white;

  --agenda-event-subject-font-size: 12px;
  --agenda-event-subject-color: white;

  --agenda-event-location-font-size: 20px;
  --agenda-event-location-color: white;

  --agenda-event-attendees-color: gold;
}

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

メソッド

テンプレート

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

次の例は、 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>

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

イベント

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

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

Microsoft Graph のアクセス許可

このコンポーネントでは、次の Microsoft Graph API が使用されます。 API 呼び出しごとに、一覧表示されているいずれかのアクセス許可が必要です。

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

サブコンポーネント

mgt-agenda コンポーネントは、前に一覧表示されているもの以外のアクセス許可を必要とする可能性がある 1 つ以上のサブコンポーネントで構成されます。 詳細については、各サブコンポーネントのドキュメント mgt-people を参照してください。

認証

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

キャッシュ

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

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

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

ローカリゼーション

コントロールでは、ローカライズ変数は公開されません。