Microsoft Graph ツールキットの議題コンポーネントAgenda component in the Microsoft Graph Toolkit

mgt-agendaWeb コンポーネントは、ユーザーまたはグループの予定表のイベントを表します。The mgt-agenda web component represents events in a user or group calendar. 既定では、現在の日付の現在サインインしているユーザーイベントが予定表に表示されます。By default, the calendar displays the current signed in user events for the current day. コンポーネントは、Microsoft Graph からイベントを返すエンドポイントを使用することもできます。The component can also use any endpoint that returns events from Microsoft Graph.

Example

次の例では、サインインしているユーザーの予定表イベントをコンポーネントを使用して表示し mgt-agenda ます。The following example shows the signed-in user's calendar events displayed using the mgt-agenda component. コードエディターを使用すると、プロパティがコンポーネントの動作を変更する方法を確認できます。You can use the code editor to see how properties change the behavior of the component.

この例は、次のようにしてください。Open this example in mgt.dev

プロパティProperties

既定では、 mgt-agenda コンポーネントはエンドポイントからイベントをフェッチ /me/calendarview し、現在の日付のイベントを表示します。By default, the mgt-agenda component fetches events from the /me/calendarview endpoint and displays events for the current day. この動作を変更するには、いくつかのプロパティを使用できます。There are several properties you can use to change this behavior.

属性Attribute プロパティProperty 説明Description
datedate datedate Microsoft Graph から取り出すイベントの開始日を表す文字列型 (string) の値を指定します。A string that represents the start date of the events to fetch from Microsoft Graph. Value は、属性が設定されている場合には、日付のコンストラクター -値で解析できる形式である必要があり event-query ます。Value should be in a format that can be parsed by the Date constructor - value has no effect if event-query attribute is set.
days days Microsoft Graph から取得する日数を指定します-既定値は3です event-query 。属性が設定されている場合は効果がありません。A number of days to fetch from Microsoft Graph - default is 3 - value has no effect if event-query attribute is set.
show-maxshow-max showMaxshowMax 表示するイベントの最大数を示す数値を指定します。A number to indicate the maximum number of events to show. 既定値は設定されていません (最大値がありません)。The default value is not set (no maximum).
グループ idgroup-id groupIdgroupId 現在サインインしているユーザーの予定表の代わりに使用する、グループの予定表の文字列 ID。A string ID for a group calendar to use instead of the current signed in user's calendar.
イベント-クエリevent-query eventQueryeventQuery Microsoft Graph からイベントを取得するときに使用する代替クエリを表す文字列。A string that represents an alternative query to be used when fetching events from Microsoft Graph. 必要に応じて、デリゲートスコープを () で区切り、文字列の末尾に追加し | /groups/GROUP-ID-GUID/calendar/calendarView | group.read.all ます。Optionally, add the delegated scope at the end of the string by delimiting it with | (/groups/GROUP-ID-GUID/calendar/calendarView | group.read.all).
eventsevents eventsevents コンポーネントによってレンダリングされるイベントのリストを取得または設定するイベントの配列-このプロパティを使用して、コンポーネントによって読み込まれたイベントにアクセスします。An array of events to get or set the list of events rendered by the component - use this property to access the events loaded by the component. 独自のイベントを読み込むには、この値を設定します。値が開発者によって設定されている場合、、、 date days または event-query 属性は影響を与えません。Set this value to load your own events - if value is set by developer, the date, days, or event-query attributes have no effect.
1日のグループ化group-by-day groupByDaygroupByDay 既定でイベントをグループ化するブール値はグループ化されません。A Boolean value to group events by day - by default events are not grouped.

次の例では、コンポーネントの動作を変更して、特定の日付および最大3日間のデータをフェッチします。The following example changes the behavior of the component to fetch data for a specific date and up to three days.

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

次の例では、コンポーネントの動作を変更して、特定のクエリからデータをフェッチします。The following example changes the behavior of the component to fetch data from a specific query.

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

CSS カスタムプロパティCSS custom properties

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

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: #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;
}

詳細については、「スタイルコンポーネント」を参照してください。To learn more, see styling components.

テンプレートTemplates

コンポーネントは、 mgt-agenda コンポーネントの特定の部分を置き換えることができるいくつかのテンプレートをサポートしています。The mgt-agenda component supports several templates that allow you to replace certain parts of the component. テンプレートを指定するには、 <template> コンポーネントの内部に要素を含め、 data-type 値を次のいずれかに設定します。To specify a template, include a <template> element inside of a component and set the data-type value to one of the following:

データ型Data type データコンテキストData context 説明Description
default events: event オブジェクトのリストevents: list of event objects 既定のテンプレートでは、コンポーネント全体が独自のものに置き換えられます。The default template replaces the entire component with your own.
event event: event オブジェクトevent: event object 各イベントのレンダリングに使用するテンプレート。The template used to render each event.
event-other event: event オブジェクトevent: event object 各イベントに対して追加のコンテンツをレンダリングするために使用するテンプレート。The template used to render additional content for each event.
header header: stringheader: string 各日のヘッダーのレンダリングに使用するテンプレート。The template used to render the header for each day.
loading データコンテキストが渡されないNo data context is passed データの読み込み時に使用されるテンプレート。The template used when data is loading.
no-data データコンテキストが渡されないNo data context is passed イベントが使用できないときに使用するテンプレート。The template used when no events are available.

次の例は、テンプレートの使用方法を示してい event ます。The following examples illustrates how to use the event template:

<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 }}"
          show-name
          show-email>
        </mgt-person>
      </div>
    </button>
  </template>
  <template data-type="no-data">
    There are no events found!
  </template>
</mgt-agenda>

詳細については、「 templates」を参照してください。To learn more, see templates.

イベントEvents

コントロールから、次のイベントが発生します。The following events are fired from the control.

イベントEvent 説明Description
eventClickeventClick ユーザーがイベントをクリックまたはタップしたとき。The user clicks or taps an event.

アクセス許可Permissions

このコンポーネントは、次の Microsoft Graph Api とアクセス許可を使用します。This component uses the following Microsoft Graph APIs and permissions:

リソースResource アクセス許可Permission
/me/calendarview/me/calendarview Calendars.ReadCalendars.Read

このコンポーネントを使用すると、別の Microsoft Graph クエリを指定して呼び出すことができます (など /groups/{id}/calendar/calendarView )。The component allows you to specify a different Microsoft Graph query to call (such as /groups/{id}/calendar/calendarView). この場合は、で区切られた文字列の末尾にアクセス許可を追加 | します。In this case, append the permission to the end of the string, delimited by |.

既定のテンプレートと既定のテンプレートを使用する場合 renderAttendees は、追加の api およびアクセス許可が必要です。When using the default template and default renderAttendees template, additional APIs and permissions are required. このコンポーネントの既定のテンプレートでは、出席者を持つイベントに対して、次のものを必要とする、 peopleというコンポーネントを使用します。The default template for this component uses a mgt-people component for events that have attendees, which requires the following.

リソースResource アクセス許可Permission
/users/users ReadBasicUsers.ReadBasic.All
/me/calendarview/me/calendarview People.ReadPeople.Read
/me/calendarview/me/calendarview Contacts.ReadContacts.Read

認証Authentication

ログインコントロールは、認証のドキュメントで説明されているグローバル認証プロバイダを活用します。The login control leverages the global authentication provider described in the authentication documentation.

拡張して制御するExtend for more control

より複雑なシナリオまたは真のカスタム UX の場合、このコンポーネントは protected コンポーネント拡張機能でオーバーライドするためのいくつかの render * メソッドを公開します。For more complex scenarios or a truly custom UX, this component exposes several protected render* methods for override in component extensions.

メソッドMethod 説明Description
renderLoadingrenderLoading コンポーネントの読み込み中に読み込み状態をレンダリングします。Renders a loading state while the component loads.
renderNoDatarenderNoData 空のデータ状態をレンダリングします。Renders an empty data state.
renderGroupsrenderGroups イベントデータをグループに並べ替え、グループヘッダーでレンダリングします。Sorts event data into groups and renders them with group headers.
renderHeaderrenderHeader グループヘッダーをレンダリングします。Renders a group header.
renderEventsrenderEvents Event オブジェクトのリストをレンダリングします。Renders a list of event objects.
renderEventrenderEvent 単数形イベントとそのすべての部分をレンダリングします。Renders a singular event and all of its parts.
renderTitlerenderTitle イベントタイトルパーツをレンダリングします。Renders the event title part.
renderLocationrenderLocation イベントの場所パーツをレンダリングします。Renders the event location part.
renderAttendees 者renderAttendees イベント出席者のパーツをレンダリングします。Renders the event attendees part.
renderOtherrenderOther 追加のイベントコンテンツをレンダリングします。Renders additional event content.