次の方法で共有

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

  • [アーティクル]

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

例

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

プロパティ

既定では、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)。
イベント イベント コンポーネントによってレンダリングされるイベントの一覧を取得または設定するイベントの配列。 コンポーネントによって読み込まれたイベントにアクセスするには、このプロパティを使用します。 この値を設定して、独自のイベントを読み込みます。 days開発者dateが設定した場合、または event-query 属性は効果がありません。
group-by-day groupByDay イベントを日別にグループ化するブール値。 既定では、イベントはグループ化されません。
preferred-timezone preferredTimezone Microsoft Graph から取得したイベントを表示するときに使用する IANA タイム ゾーンの名前。たとえば、 America/Los_Angelesです。 IANA タイム ゾーンの一覧については、「 tz データベースタイム ゾーンの一覧」を参照してください。 既定では、イベントはデバイスの現在のタイム ゾーン設定を使用してレンダリングされます。

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

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

メソッド

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

テンプレート

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 呼び出しごとに、一覧表示されているいずれかのアクセス許可が必要です。

構成 アクセス許可 API
default Calendars.ReadBasic、Calendars.Read、Calendars.ReadWrite /me/calendarview
group-id 指定 Group.Read.All、Group.ReadWrite.All /groups/{groupId}/calendar/calendarview
event-query 指定 で必要に応じて提供されるように、 event-query で提供された API event-query

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

サブコンポーネント

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

認証

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

キャッシュ

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

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

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

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

ローカリゼーション

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