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

Предостережение

Набор средств Microsoft Graph не рекомендуется использовать. Период выхода на пенсию начинается 1 сентября 2025 года, а полный выход на пенсию запланирован на 28 августа 2026 года. Разработчикам следует перейти на использование пакетов SDK для Microsoft Graph или других поддерживаемых средств Microsoft Graph для создания веб-интерфейсов. Дополнительные сведения см. в объявлении об устаревании.

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

Локализация

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

Кері байланыс

Бет пайдалы болды ма?

Last updated on 2024-11-07