Компонент повестки дня в наборе средств Microsoft Graph
Веб-компонент mgt-agenda
отображает события в календаре пользователя или группы. По умолчанию в календаре отображаются текущие события вошедшего пользователя, запланированные на текущий день. Компонент также может использовать любую конечную точку, возвращающую события из Microsoft Graph.
Пример
В следующем примере показаны события календаря вошедшего пользователя, отображаемые с помощью компонента mgt-agenda
. Вы можете использовать редактор кода, чтобы узнать, как свойства изменяют поведение компонента.
Свойства
По умолчанию компонент mgt-agenda
извлекает события из конечной точки /me/calendarview
и отображает события, запланированные на текущий день. Это поведение можно изменить с помощью нескольких свойств.
Атрибут | Свойство | Описание |
---|---|---|
дата | date | Строка, представляющая дату начала событий, извлекаемых из Microsoft Graph. Значение должно быть в формате, подходящем для конструктора Date. Это значение не действует, 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 | Имя часового пояса IANA, используемого при отображении событий, полученных из Microsoft Graph; например, 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;
}
Дополнительные сведения см. в статье Компоненты стиля.
Методы
Метод | Описание |
---|---|
reload() | Вызывает метод для перезагрузки компонента с потенциальными новыми данными на основе его свойств. |
Шаблоны
Компонент 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 требуется одно из перечисленных разрешений.
Конфигурация | Разрешение | API |
---|---|---|
default | 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
не кэшировать данные.
Расширение для дополнительного управления
В более сложных сценариях или настраиваемых пользовательских интерфейсах этот компонент предоставляет несколько методов protected
render* для переопределения в расширениях компонента.
Метод | Описание |
---|---|
renderLoading | Отображает состояние загрузки во время загрузки компонента. |
renderNoData | Отображает пустое состояние данных. |
renderGroups | Сортирует данные событий по группам и отображает их с заголовками групп. |
renderHeader | Отображает заголовок группы. |
renderEvents | Отображает список объектов события. |
renderEvent | Отображает одно событие и все его части. |
renderTitle | Отображает название события. |
renderLocation | Отображает расположение события. |
renderAttendees | Отображает участников события. |
renderOther | Отрисовывает другое содержимое события. |
Локализация
Элемент управления не предоставляет переменные локализации.