Note
Access to this page requires authorization. You can try signing in or changing directories.
Access to this page requires authorization. You can try changing directories.
Caution
The Microsoft Graph Toolkit is deprecated. The retirement period begins September 1, 2025, with full retirement planned for August 28, 2026. Developers should migrate to using the Microsoft Graph SDKs or other supported Microsoft Graph tools for building web experiences. For more information, see the deprecation announcement.
The To Do component is used to enable the signed-in user to view, add, remove, complete, and/or edit tasks from Microsoft To Do using the To Do API in Microsoft Graph.
Example
The following example displays the signed-in user's Microsoft To Do tasks using the mgt-todo component. You can use the code editor to see how properties change the behavior of the component.
Properties
You can use the following attributes and properties to customize the component.
| Attribute | Property | Description |
|---|---|---|
| read-only | readOnly | A Boolean to set the task interface to be read only (no adding or removing tasks). Default is false. |
| initial-id="folder_id" | initialId | A string ID to set the initially displayed folder to the provided ID. |
| target-id="folder_id" | targetId | A string ID to lock the tasks interface to the provided folder ID. |
| N/A | isNewTaskVisible | Determines whether new task view is visible at render. |
| N/A | taskFilter | An optional function to filter which tasks are shown to the user. |
The following example shows only tasks from the folder with ID 12345 and does not allow the user to create new tasks.
Custom CSS variables
The mgt-todo component defines the following CSS custom properties.
.todo {
--task-new-cancel-button-color: blue;
--task-detail-color: purple;
--task-color: black;
--task-background-color: white;
--task-complete-background-color: grey;
--task-date-input-active-color: blue;
--task-date-input-hover-color: green;
--task-background-color-hover: grey;
--task-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
--task-border: 1px solid black;
--task-border-completed: 1px solid grey;
--task-radio-background-color: green;
}
To learn more, see styling components.
Events
The following events are fired from the component.
| Event | When is it emitted | Custom data | Cancelable | Bubbles | Works with custom template |
|---|---|---|---|---|---|
taskClick |
Fires when the user clicks or taps on a task | Selected task | No | No | No |
For more information about handling events, see events.
Templates
The todo component supports several templates that allow you to replace certain parts of the component. To specify a template, include a element inside a component and set the data-type to one of the following values.
| Data type | Data context | Description |
|---|---|---|
| task | task: a To Do task object | Replaces the whole default task. |
| task-details | task: a To Do task object | Template replaces the details section of the task. |
The following example defines a template for the tasks component.
Importance Level: {{task.importance}}
Microsoft Graph permissions
This control uses the following Microsoft Graph APIs and permissions. For each API called, the user must have at least one of the listed permissions.
| Configuration | Permission | API |
|---|---|---|
targetId or initialId set |
Tasks.Read, Tasks.ReadWrite | /me/todo/lists/${listId}, /me/todo/lists/{todoTaskListId}/tasks |
targetId not set |
Tasks.Read, Tasks.ReadWrite | /me/todo/lists, /me/todo/lists/{todoTaskListId}/tasks |
| create, update or delete task | Tasks.ReadWrite | /me/todo/lists/{todoTaskListId}/tasks/{taskId} |
Authentication
The todo component uses the global authentication provider described in the authentication documentation.
Cache
The mgt-todo component doesn't cache any data.
Localization
The control exposes the following variables that can be localized. For more information, see Localizing components.
| String name | Default value |
|---|---|
| cancelNewTaskSubtitle | Cancel |
| newTaskPlaceholder | Add a task |
| newTaskLabel | New Task Input |
| addTaskButtonSubtitle | Add |
| deleteTaskLabel | Delete Task |
| dueDate | Due date |
| newTaskDateInputLabel | New Task Date Input |
| newTaskNameInputLabel | New Task Name Input |
| cancelAddingTask | Cancel adding a new task |