Microsoft Graph 工具包中的议程组件
Web mgt-agenda 组件表示用户或组日历中的事件。 默认情况下，日历显示当天的当前登录用户事件。 组件还可以使用从 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) 进行分隔。 |
| events | events | 事件数组，用于获取或设置组件呈现的事件列表。 使用此属性访问组件加载的事件。 设置此值以加载自己的事件。
date、 days或 event-query 属性如果由开发人员设置，则不起作用。 |
| 按天分组 | groupByDay | 一个布尔值，用于按天对事件进行分组。 默认情况下，不会对事件进行分组。 |
| preferred-timezone | preferredTimezone | 显示从 Microsoft Graph 检索到的事件时要使用的 IANA 时区的名称;例如 。 America/Los_Angeles 有关 IANA 时区的列表，请参阅 tz 数据库时区列表。 默认情况下，事件使用设备的当前时区设置呈现。 |
以下示例更改组件的行为，以提取特定日期和最多三天的数据。
<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 以下值之一：
| 数据类型 | 数据上下文 | 说明 |
|---|---|---|
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>
若要了解详细信息，请参阅 模板。
事件
以下事件是从 控件触发的。
| 事件 | 何时发出 | 自定义数据 | 可取消 | 泡沫 | 使用自定义模板 |
|---|---|---|---|---|---|
eventClick |
用户选择或点击事件。 | 所选 事件 | 否 | 否 | 是，使用自定义 事件 模板 |
有关处理事件的详细信息，请参阅 事件。
Microsoft Graph 权限
此组件使用以下 Microsoft Graph API。 对于每个 API 调用，需要列出的权限之一。
| 配置 | 权限 | API |
|---|---|---|
| 默认 | 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 组件由一个或多个子组件组成，这些子组件可能需要除前面列出的子组件以外的权限。 有关详细信息，请参阅每个子组件的文档： mgt-people。
身份验证
控件使用身份验证文档中所述的全局 身份验证提供程序。
缓存
组件 mgt-agenda 不缓存任何数据。
扩展以获得更多控制
对于更复杂的方案或真正自定义的 UX，此组件公开了多个 protected 呈现方法*，用于在组件扩展中替代。
| 方法 | 说明 |
|---|---|
| renderLoading | 在组件加载时呈现加载状态。 |
| renderNoData | 呈现空数据状态。 |
| renderGroups | 将事件数据排序到组中，并使用组标头呈现它们。 |
| renderHeader | 呈现组标头。 |
| renderEvents | 呈现事件对象的列表。 |
| renderEvent | 呈现单数事件及其所有部分。 |
| renderTitle | 呈现事件标题部件。 |
| renderLocation | 呈现事件位置部分。 |
| renderAttendees | 呈现事件与会者部分。 |
| renderOther | 呈现其他事件内容。 |
本地化
控件不公开任何本地化变量。