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 呈现其他事件内容。

本地化

控件不公开任何本地化变量。