Web mgt-agenda 组件表示用户或组日历中的事件。 默认情况下，日历显示当天的当前登录用户事件。 组件还可以使用从 Microsoft Graph 返回事件的任何终结点。

以下示例显示使用 mgt-agenda 组件显示的已登录用户的日历事件。 可以使用代码编辑器来查看 属性 如何更改组件的行为。

在 mgt.dev 中打开此示例

默认情况下， mgt-agenda 组件从终结点提取事件， /me/calendarview 并显示当天的事件。 可以使用多个属性来更改此行为。

一个字符串，表示要从 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>
组件 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 并将值设置为以下值之一：
数据上下文
  <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>
    </button>
  </template>
  <template data-type="no-data">
    There are no events found!
  </template>
</mgt-agenda>
若要了解详细信息，请参阅 模板。
以下事件是从 控件触发的。
Event
自定义数据
使用自定义模板
组件允许指定不同的 Microsoft Graph 查询来调用 (，例如 /groups/{id}/calendar/calendarView) 。 在这种情况下，请将权限追加到字符串的末尾（用 |分隔）。
使用默认模板和默认 renderAttendees 模板时，需要其他 API 和权限。 此组件的默认模板对具有与会者的活动使用 mgt-people 组件，并继承所有权限。
登录控件使用身份验证文档中所述的全局 身份验证提供程序。
组件 mgt-agenda 不缓存任何数据。
扩展以获得更多控制
对于更复杂的方案或真正自定义的 UX，此组件公开了多个 protected 呈现方法*，用于在组件扩展中替代。