We’re pleased to announce the release of our new widget – JavaScript To Do List. With DHTMLX To Do List, your users will be able to create and manage checklists of any complexity and nested level.
This article describes the key features of DHTMLX To Do List v1.0, including handy task management, ability to assign dates and participants, and user-friendly keyboard navigation. Moreover, we show you how to integrate To Do List with DHTMLX Gantt and what are the ways to customize its appearance.
Managing Projects and Tasks
DHTMLX To Do List consists of two separate parts. The first one is a Toolbar that allows adding new projects and switching between them using a combo control. Users can rename a currently active project or delete it by clicking on a corresponding command in the context menu. The full list of operations with projects via API is available in the documentation.
The second part is a List where users can create an unlimited number of tasks with subtasks. By default, users can edit task content by double-clicking on it. They may also collapse or expand a task, indent or outdent it, move it to another project, or permanently delete a task from the list with the help of a context menu. The To Do List documentation describes how to manage tasks from the UI and includes a list of task operations available via API.
There are two modes of marking tasks complete you can choose from. The first one is a default or auto mode that allows automatically completing a parent task if a user checks all its children.
Moreover, you may opt for the second or manual mode of checking/unchecking tasks that enables users to complete all tasks themselves.
Using Tags
One of the most convenient features of the DHTMLX To Do List is the ability to work with hashtags. It enables users to categorize tasks and reduce the time required for searching for the necessary task.
To add a tag, users have to type # with the required content and press Enter. Besides, the widget displays a list of all created tags to avoid making an error while typing. Hashtags are available in all To Do List projects and can be used to filter tasks. To do so, users need to click a tag or enter it in the search bar.
Setting Due Dates
The first To Do List release comes with the ability to set a due date for a task. By default, the due date has a green color that switches to red when the task is overdue. You can disable the date validation feature and make its content grey by disabling the validate setting inside the date parameter of the taskShape property.
Moreover, you can configure To Do List to display dates in a custom format. DHTMLX widget shows dates in the “%d %M %Y” format. You may add the name of the day or display the month as a number by specifying the corresponding characters in the date settings via the taskShape property. See the full list of characters for setting a date format in the documentation.
Assigning Participants
With DHTMLX To Do List, users can assign participants to those tasks that require the attention of particular team members. Therefore, they need to open a task menu and select one or several participants from the dropdown list of the “Assign to” menu item. It’s also possible to allocate tasks between team members via the assignUser() and unassignUser() methods:
list.assignUser({
id: "3",
userId: "user_1"
});
// unassign a user from the task
list.unassignUser({
id: "2",
userId: "user_1"
});
You can specify the list of participants via the users configuration property. It’s possible to add a description and image of the team member or set a color if the image isn’t uploaded.
{ id: "user_1", label: "Don Smith", avatar: "../avatar_61.jpg"},
{ id: "user_2", label: "Nadia Chasey", avatar: "../avatar_63.jpg" },
{ id: "user_3", label: "Mike Young", avatar: "../avatar_03.jpg" },
{ id: "user_4", label: "Elvira Webb", avatar: "../avatar_33.jpg" }
];
const list = new ToDo("#root", { users });
Full-Fledged Keyboard Navigation
Starting from its first release, DHTMLX To Do List offers convenient keyboard navigation. It covers all necessary commands, such as duplicating, copying, and pasting tasks. Besides, users can add or delete tasks, expand or collapse a task list, and move the selected task up or down. You can find out the full list of keyboard shortcuts in the documentation.
Integrating with DHTMLX Gantt
We’re happy to say that To Do List works smoothly with other DHTMLX widgets, such as Scheduler event calendar, Kanban board, and Suite UI library. Therefore, you can build feature-rich project and task management apps for any industry. Here is an example of syncing DHTMLX To Do List with our Gantt chart library.
Easily Configurable and Customizable Appearance
Just like any DHTMLX widget, our To Do List library supports flexible configuration with the help of its intuitive API. For example, you can modify the toolbar structure by hiding the built-in controls or adding custom elements, e.g. a button or your company logo, using the items configuration property of Toolbar:
The List view is also configurable. By default, each parent task displays the progress of task completion as a ratio between completed subtasks and the total number of subtasks. However, you can show the percentage of completed children tasks by updating the counter settings inside the taskShape property. You should just change the default “number” value of the type attribute to the “percentage” inside the counter parameter:
tasks,
users,
projects,
taskShape: {
counter: {
type: "percentage" // "number" by default
}
}
});
DHTMLX To Do List allows you to modify its look and feel by using predefined CSS variables. They include base colors, fonts, icons, checkbox appearance, etc. You can find the full list of CSS variables in the documentation.
Other Features
You can make a To Do List read-only by setting a readonly configuration property to true.
By default, DHTMLX To Do List uses an English locale. However, you can localize its UI by choosing some of the predefined locales or creating custom ones. You can read about how to localize To Do List as well as where to download ready-made locales in the documentation.
Our To Do List works both with the client and server-side data. By default, the widget comes with the Go and Node backend. However, it may be easily connected with any backend platform using the REST API.
You can read about the initial functionality of DHTMLX To Do List v1.0 in the “What’s new” article in the documentation.
To estimate the functionality of our brand-new JavaScript library, download a free 30-day trial.
We’re pleased to discuss the future releases as well as answer your questions about DHTMLX To Do List in the comment section below.