Microsoft Graph 工具包中的议程组件

Web mgt-agenda 组件表示用户或组日历中的事件。 默认情况下，日历显示当天的当前登录用户事件。 组件还可以使用从 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) 进行分隔。
events	events	事件数组，用于获取或设置组件呈现的事件列表 - 使用此属性访问组件加载的事件。 设置此值以加载你自己的事件 - 如果值由开发人员设置，则 date、 days或 event-query 属性不起作用。
按天分组	groupByDay	按天对事件进行分组的布尔值 - 默认情况下，不会对事件进行分组。
preferred-timezone	preferredTimezone	从 Microsoft Graph 检索事件时要使用的首选时区的名称;例如 。 Pacific Standard Time 默认情况下，此属性使用 UTC 时区。 通过调用 me/mailboxSettings 终结点并读取 timeZone 属性的值，可以检索当前用户的首选时区。

以下示例更改组件的行为，以提取特定日期和最多三天的数据。

<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 对象	用于呈现每个事件的模板。
event-other	event：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>

若要了解详细信息，请参阅 模板。

事件

以下事件是从 控件触发的。

Event	何时发出	自定义数据	可取消	泡沫	使用自定义模板
eventClick	用户单击或点击事件。	所选 事件	否	否	是，使用自定义 事件 模板

有关处理事件的详细信息，请参阅 事件。

Microsoft Graph 权限

此组件使用以下 Microsoft Graph API 和权限：

配置	权限	API
默认	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	呈现其他事件内容。