Компонент повестки дня в наборе средств Microsoft Graph
Веб-компонент mgt-agenda отображает события в календаре пользователя или группы. По умолчанию в календаре отображаются текущие события вошедшего пользователя, запланированные на текущий день. Компонент также может использовать любую конечную точку, возвращающую события из Microsoft Graph.
Пример
В следующем примере показаны события календаря вошедшего пользователя, отображаемые с помощью компонента mgt-agenda. Вы можете использовать редактор кода, чтобы узнать, как свойства изменяют поведение компонента.
Свойства
По умолчанию компонент mgt-agenda извлекает события из конечной точки /me/calendarview и отображает события, запланированные на текущий день. Это поведение можно изменить с помощью нескольких свойств.
| Атрибут | Свойство | Описание |
|---|---|---|
| дата | date | Строка, представляющая дату начала событий, извлекаемых из Microsoft Graph. Значение должно быть в формате, который может быть проанализирован конструктором дат. Значение не оказывает влияния, если установлен атрибут event-query. |
| days | days | Количество дней, извлекаемых из Microsoft Graph (по умолчанию — 3 дня). Значение не оказывает влияния, если установлен атрибут event-query. |
| show-max | showMax | Число, указывающее максимальное количество отображаемых событий. Значение по умолчанию не установлено (не ограничено). |
| group-id | groupId | Идентификатор строки для группового календаря, используемого вместо текущего календаря вошедшего пользователя. |
| event-query | eventQuery | Строка, представляющая альтернативный запрос, используемый при извлечении событий из Microsoft Graph. При необходимости добавьте делегированную область в конец строки, разделив ее с помощью символа | (/groups/GROUP-ID-GUID/calendar/calendarView | group.read.all). |
| events | events | Массив событий для получения или установки списка событий, отображаемых компонентом. Используйте это свойство для доступа к событиям, загружаемым компонентом. Установите это значение, чтобы загрузить свои собственные события. Если значение установлено разработчиком, атрибуты date, days и event-query не оказывают влияния. |
| group-by-day | 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-other |
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
Этот компонент использует следующие API и разрешения Microsoft Graph.
| Конфигурация | Разрешение | API |
|---|---|---|
| default | Calendars.Read | /me/calendarview |
Компонент позволяет указать другой запрос Microsoft Graph для вызова (например, /groups/{id}/calendar/calendarView). В этом случае добавьте разрешение в конец строки, разделенной символом |.
При использовании шаблона по умолчанию и шаблона по умолчанию renderAttendees, требуются дополнительные API и разрешения. Шаблон по умолчанию для этого компонента использует компонент mgt-people для событий с участниками и наследует все разрешения.
Проверка подлинности
В элементе управления входом используется глобальный поставщик проверки подлинности, описанный в документации по проверке подлинности.
Кэш
Компонент mgt-agenda не кэшировать данные.
Расширение для дополнительного управления
В более сложных сценариях или настраиваемых пользовательских интерфейсах этот компонент предоставляет несколько методов protected render* для переопределения в расширениях компонента.
| Метод | Описание |
|---|---|
| renderLoading | Отображает состояние загрузки во время загрузки компонента. |
| renderNoData | Отображает пустое состояние данных. |
| renderGroups | Сортирует данные событий по группам и отображает их с заголовками групп. |
| renderHeader | Отображает заголовок группы. |
| renderEvents | Отображает список объектов события. |
| renderEvent | Отображает одно событие и все его части. |
| renderTitle | Отображает название события. |
| renderLocation | Отображает расположение события. |
| renderAttendees | Отображает участников события. |
| renderOther | Отображает дополнительное содержимое события. |