Поделиться через

компонент Планировщик в наборе средств Microsoft Graph

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

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

Компонент Планировщик позволяет пользователю просматривать, добавлять, удалять, завершать или изменять задачи из Планировщик (Майкрософт).

Кроме того, пользователь может назначить задаче одного или нескольких пользователей Microsoft Graph. Дополнительные сведения о назначениях Microsoft Graph см. в разделе PlannerAssignments.

Важно!

С выпуском @microsoft/mgt-components версии 4 компонент планировщика заменяет старый компонент задач и больше не поддерживает использование задач Outlook в качестве источника данных.

Пример

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

Свойства

Атрибут Свойство Описание
read-only readOnly Логическое значение для настройки интерфейса задачи только для чтения (без добавления или удаления задач). Значение по умолчанию: false.
hide-header hideHeader Логическое значение для отображения или скрытия заголовка компонента. Значение по умолчанию: false.
hide-options hideOptions Логическое значение для отображения или скрытия параметров в задачах. Значение по умолчанию: false.
initial-id="planner_id/folder_id" initialId Идентификатор строки для задания первоначально отображаемого плана по указанному идентификатору.
initial-bucket-id="bucket_id" initialBucketId Идентификатор строки для задания первоначально отображаемого контейнера в качестве предоставленного идентификатора.
target-id="planner_id/folder_id" targetId Идентификатор строки для блокировки интерфейса задач по указанному идентификатору плана.
target-bucket-id="bucket_id" targetBucketId Идентификатор строки для блокировки интерфейса задач по указанному идентификатору контейнера.
group-id groupId Идентификатор строки для блокировки интерфейса задач по идентификатору группы.
- isNewTaskVisible Определяет, отображается ли новое представление задач при визуализации.
- taskFilter Необязательная функция для фильтрации задач, демонстрируемых пользователю.

В следующем примере показаны только задачи из Планировщик с идентификатором 12345 и не позволяют пользователю создавать новые задачи.

<mgt-planner read-only initial-id="12345"></mgt-planner>

В следующем примере показано, как фильтровать задачи, для которых задана только категория 3 .

let taskView = document.querySelector("mgt-planner");
taskView.taskFilter = (task) => task.appliedCategories.category3 === true;

Настраиваемые переменные CSS

<mgt-planner class="tasks"></mgt-planner>

.tasks {
  --tasks-header-padding: 28px 14px;
  --tasks-header-margin: 0 14px;
  --tasks-header-font-size: large;
  --tasks-header-font-weight: 800;
  --tasks-header-text-color: blue;
  --tasks-header-text-hover-color: gray;

  --tasks-new-button-width: 300px;
  --tasks-new-button-height: 50px;
  --tasks-new-button-text-color: orange;
  --tasks-new-button-text-font-weight: 400;
  --tasks-new-button-background: black;
  --tasks-new-button-border: 2px dotted golden;
  --tasks-new-button-background-hover: gray;
  --tasks-new-button-background-active: red;

  --task-add-new-button-width: 60px;
  --task-add-new-button-height: 35px;
  --task-add-new-button-text-color: orange;
  --task-add-new-button-text-font-weight: 400;
  --task-add-new-button-background: black;
  --task-add-new-button-border: 2px dotted white;
  --task-add-new-button-background-hover: gray;
  --task-add-new-button-background-active: red;

  --task-cancel-new-button-width: 60px;
  --task-cancel-new-button-height: 35px;
  --task-cancel-new-button-text-color: yellow;
  --task-cancel-new-button-text-font-weight: 400;
  --task-cancel-new-button-background: red;
  --task-cancel-new-button-border: 2px dashed white;
  --task-cancel-new-button-background-hover: brown;
  --task-cancel-new-button-background-active: red;

  --task-complete-checkbox-background-color: red;
  --task-complete-checkbox-text-color: yellow;
  --task-incomplete-checkbox-background-color: orange;
  --task-incomplete-checkbox-background-hover-color: yellow;

  --task-title-text-font-size: large;
  --task-title-text-font-weight: 500;
  --task-complete-title-text-color: green;
  --task-incomplete-title-text-color: purple;

  --task-icons-width: 32px;
  --task-icons-height: 32px;
  --task-icons-background-color: purple;
  --task-icons-text-font-color: black;
  --task-icons-text-font-size: 16px;
  --task-icons-text-font-weight: 400;

  --task-complete-background-color: powderblue;
  --task-incomplete-background-color: salmon;
  --task-complete-border: 2px dashed green;
  --task-incomplete-border: 2px double red;
  --task-complete-border-radius: 8px;
  --task-incomplete-border-radius: 12px;
  --task-complete-padding: 8px;
  --task-incomplete-padding: 12px;
  --tasks-gap: 8px;

  --tasks-background-color: violet;
  --tasks-border: 2px dashed green;
  --tasks-border-radius: 12px;
  --tasks-padding: 16px;

  /** affects the date picker and the text-input field **/
  --task-new-input-border: 2px solid green;
  --task-new-input-border-radius: 8px;
  --task-new-input-background-color: yellow;
  --task-new-input-hover-background-color: yellowgreen;
  --task-new-input-placeholder-color: black;

  /** affects the date picker and the text-input field **/
  --task-new-dropdown-border: 2px solid green;
  --task-new-dropdown-border-radius: 8px;
  --task-new-dropdown-background-color: yellow;
  --task-new-dropdown-hover-background-color: yellowgreen;
  --task-new-dropdown-placeholder-color: red;
  --task-new-dropdown-option-text-color: blue;
  --task-new-dropdown-list-background-color: yellow;
  --task-new-dropdown-option-hover-background-color: yellowgreen;

  --task-new-person-icon-text-color: blue;
  --task-new-person-icon-color: blue;
  
  /** affects the options menu */
  --dot-options-menu-background-color: yellow;
  --dot-options-menu-shadow-color: yellow;
  --dot-options-menu-item-color: maroon;
  --dot-options-menu-item-hover-background-color: white;
}

Дополнительные сведения см. в статье Компоненты стиля.

События

Событие Когда он генерируется Пользовательские данные Отменяемым Пузыри Работает с пользовательским шаблоном
taskAdded Возникает при создании новой задачи. Недавно созданный планировщикTask Нет Нет Да
taskChanged Возникает при изменении метаданных задачи, таких как маркировка завершена Обновлен планировщикTask Нет Нет Нет
taskClick Возникает, когда пользователь выбирает задачу task свойство с выбранным plannerTask Нет Нет Нет
taskRemoved Возникает при удалении существующей задачи task свойство с выбранным plannerTask Нет Нет Нет

Дополнительные сведения об обработке событий см. в разделе События.

Шаблоны

Компонент planner поддерживает несколько шаблонов, позволяющих заменить определенные части компонента. Чтобы указать шаблон, добавьте <template> элемент в компонент и задайте для data-type свойства одно из следующих значений:

Тип данных Контекст данных Описание
task task: объект задачи планировщика заменяет всю задачу по умолчанию.
task-details task: объект задачи планировщика шаблон заменяет раздел сведений задачи.

В следующем примере определяется шаблон для компонента планировщика.

<mgt-planner>
  <template data-type="task-details">
    <div>Owner: {{task.owner}}</div>
    <div>Importance Level: {{task.importance}}</div>
  </template>
</mgt-planner>

Разрешения Microsoft Graph

Этот элемент управления использует следующие API и разрешения Microsoft Graph. Для каждого вызываемого API пользователь должен иметь по крайней мере одно из перечисленных разрешений.

Конфигурация Разрешение API
во всех конфигурациях User.Read, User.ReadWrite /me
поведение по умолчанию Tasks.Read, Group.Read.All, Tasks.ReadWrite, Group.ReadWrite.All /me/planner/plans, /planner/plans/${planId}/buckets, /planner/buckets/${bucketId}/tasks
groupId набор Tasks.Read, Group.Read.All, Tasks.ReadWrite, Group.ReadWrite.All /groups/${group-id}/planner/plans, /planner/plans/${planId}/buckets, /planner/buckets/${bucketId}/tasks
targetId набор Tasks.Read, Group.Read.All, Tasks.ReadWrite, Group.ReadWrite.All /planner/plans/${planId}, /planner/plans/${planId}/buckets, /planner/buckets/${bucketId}/tasks
Создание, обновление или удаление задачи Tasks.ReadWrite, Group.ReadWrite.All POST /planner/tasks, PATCH /planner/tasks/${taskId}, DELETE /planner/tasks/${taskId}

Подкомпоненты

Компонент mgt-tasks состоит из одного или нескольких подкомпонентов, для которых могут потребоваться другие разрешения, отличные от перечисленных ранее. Дополнительные сведения см. в документации по каждому подкомпоненту:

Проверка подлинности

В компоненте задач используется глобальный поставщик проверки подлинности, описанный в документации по проверке подлинности.

Кэш

Компонент mgt-tasks не кэшировать данные.

Локализация

Элемент управления предоставляет следующие переменные, которые можно локализовать. Дополнительные сведения о локализации см. в разделе Локализация компонентов.

Имя строки Значение по умолчанию
removeTaskSubtitle Delete Task
cancelNewTaskSubtitle Cancel
newTaskPlaceholder Adding a task...
addTaskButtonSubtitle Add
должный Due
addTaskDate Add the task date
назначать Assign
planNotFound Plan not found
plansSelfAssigned All Plans
bucketNotFound Bucket not found
bucketsSelfAssigned All Tasks
baseSelfAssigned Assigned to Me
  • Last updated on