Компонент повестки дня в наборе средств Microsoft Graph

Статья
02/14/2024

Веб-компонент mgt-agenda отображает события в календаре пользователя или группы. По умолчанию в календаре отображаются текущие события вошедшего пользователя, запланированные на текущий день. Компонент также может использовать любую конечную точку, возвращающую события из Microsoft Graph.

Пример

В следующем примере показаны события календаря вошедшего пользователя, отображаемые с помощью компонента mgt-agenda. Вы можете использовать редактор кода, чтобы узнать, как свойства изменяют поведение компонента.

HTML
React;

Откройте этот пример в mgt.dev.

Свойства

По умолчанию компонент 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	Отрисовывает другое содержимое события.

Локализация

Элемент управления не предоставляет переменные локализации.