DHTMLX JavaScript To Do List for Effective Task Management

Use a to do list in JavaScript/HTML 5 to build an app for effective task management and let users organize their business processes in a simple way.

Key Features of DHTMLX JavaScript To Do List

• Rich JavaScript API
• Flexible configuration
• Integration with DHTMLX Gantt, Kanban, and Scheduler
• Visualizing data in Grid view
• Drag-n-drop support
• Multiselection
• Convenient keyboard navigation
• Adding new projects and switching between them
• Creating an outliner by adding an infinite number of tasks with subtasks
• Working with tags
• Assigning/unassigning participants
• Adding due dates in the required format
• Setting tasks priorities
• Inline editing
• Searching for tasks
• Sorting tasks by priority, due date, text, creation date, completion date, and date of editing
• Expanding/collapsing tasks and subtasks
• Different modes of marking tasks completed
• Calculating the number of completed subtasks
• Estimating the percentage of the task completed
• Hiding/showing completed tasks
• Data export to JSON
• Readonly mode
• Responsiveness
• Touch support
• Localization
• Full customization via CSS

Improve User Experience with DHTMLX To Do List

Implementing multi-user backend

With DHTMLX To Do List, you can integrate a multi-user backend into your app to simplify collaboration between end-users. This feature allows managing simultaneously the same tasks in the list and keeping track of any changes via the UI in real-time without page reloading.

Setting task behavior

You can set the most convenient mode of marking tasks completed. By default, if an end-user marks all children tasks as completed, the parent task automatically becomes checked. You may activate a different mode enabling end-users to manually check all tasks.

Configuring due dates

DHTMLX allows specifying a due date for a task. By default, the due date has a green color that switches to gray when the task mark is complete. However, the due date turns red when the task is overdue. You can also configure the date format by adding a short or full name of the day, displaying a month as a number, etc.

Assigning participants

End-users can add a participant (or more) to those tasks that require an action by a particular team member. To assign participants, they have to open a task menu, hover over Assign to and select necessary users from the dropdown. It’s also possible to unassign task participants by unselecting them from the dropdown list.

Prioritizing tasks

DHTMLX To Do List allows end-users to organize tasks by order of their importance and set a priority level via a task context menu or keyboard shortcuts. The default priority values include 4 options, such as No Priority, Low, Medium, and High. Moreover, you can create your own list of priority levels as well as add custom hotkeys.

Using tags

With our To Do List, end-users may add any number of hashtags to categorize tasks and make it easier to find them. They can create a new hashtag by entering # and at least one symbol. Having entered the # symbol, end-users can view the list of all created tags as well as click the necessary tag to add it to the task.

Why Choose DHTMLX JavaScript To Do List Component?

Multi-featured to do list in JavaScript

With the DHTMLX check list, you can create a perfect structure for your JavaScript projects. All tasks will be available in one single scrollable list. You can click a corresponding checkbox to complete the task. Our checklists support nested items, meaning each of them can contain several subitems. You can assign a participant, set due dates, add tags, and filter items by the specified criteria.

Rich customization options

Do you need to apply brand colors to your task list? No problem! DHTMLX to do list component has a rich API so it’s simple to customize to fit your project requirements. The look and feel of the whole HTML5/JavaScript to do list is fully modifiable. You can set a desired format to the due date, configure the toolbar appearance, as well as apply custom colors to any element.

Smooth integration with DHTMLX Gantt

You can combine the DHTMLX checklist component with our first-class Gantt chart JS library. DHTMLX Gantt is a multifunctional and high-performance solution for project management and resource-tracking apps. Having added our simple to do list JavaScript widget, you illustrate the activities that have to be done alongside any important milestones.

Support for touch devices

DHTMLX To Do List works smoothly on touchscreen devices. Users are free to create a responsive checklist with an unlimited number of projects and tasks, set due dates, assign participants, filter tasks by the criteria you defined, and more.