Skip to main content

How to start

This tutorial will teach you how to create a fully featured To Do List and add it into your web application.

how_to_start

After completing all the steps below, you will get a ready-to-use To Do List which you can easily configure to suite your needs and efficiently use in real life.

Step 1. Include source files​

info

Download the To Do List package here and unpack it into a folder of your future project.

At first, create an HTML file and call it index.html. Then include the source files of DHTMLX To Do List into this file.

You need to include the following two files:

  • the JS file of To Do List
  • the CSS file of To Do List
index.html
<!DOCTYPE html>
<html>
    <head>
        <title>How to Start with DHTMLX To Do List</title>
        <script type="text/javascript" src="./dist/todo.js"></script>  
        <link rel="stylesheet" href="./dist/todo.css">
    </head>
    <body>
        <script>
        // your code will be here
        </script>
    </body>
</html>

Installing To Do List via npm and yarn​

You can import JavaScript To Do List into your project using yarn or npm package manager.

Installing trial To Do List via npm and yarn​

info

If you want to use trial version of To Do List, download the trial To Do List package and follow steps mentioned in the README file. Note that trial To Do List is available 30 days only.

Installing PRO To Do List via npm and yarn​

info

If you have already own To Do List under the proprietary license, send your license number on the contact@dhtmlx.com email to receive login and password for private npm as well as detailed guide on how to install To Do List. Note that private npm is available before the expiration of the proprietary To Do List license.

Step 2. Create To Do List​

Now you can add a To Do List to the page. For this, you should create two DIV containers to place the To Do List and its Toolbar into. So, your steps are:

  • specify two DIV containers in the index.html file
  • initialize To Do List and its Toolbar via the new ToDo() and new Toolbar() constructors correspondingly
index.html
<!DOCTYPE html>
<html>
    <head>
        <title>How to Start with To Do List</title>
        <script type="text/javascript" src="./dist/todo.js"></script>  
        <link rel="stylesheet" href="./dist/todo.css">
    </head>
    <body>
        <div id="toolbar"></div>
        <div id="root"></div>

        <script>
            const { ToDo, Toolbar } = todo; // apply the object destructuring
            
            const list = new ToDo("#root", {
                // configuration properties 
            });
            const toolbar = new Toolbar("#toolbar", {
                api: list.api,
                // more configuration properties  
            });
        </script>
    </body>
</html>
note

You should apply the object destructuring to "unpack" the todo global object into two variables: ToDo and Toolbar.

You don't need this step if you use the new todo.ToDo() and new todo.Toolbar() constructors.

info

Toolbar is an optional part of the To Do List interface. To create a To Do List without the Toolbar, you can specify only one DIV container and initialize List via the new ToDo() constructor

For more information about initialization of To Do List read the Initialization article.

Step 3. Load data into To Do List​

As you can see, we've initialized the To Do List but it is still empty. At this step you can learn how to fill in the component with data.

info

You can skip this step if you want to display an empty component on the page

At first, you should prepare data to load into the component. The data can include the following sets of information: tasks, projects, users, tags, and activeProject

The most convenient way is to prepare data in a separate file, for example:

data.js
function getData() {
    // data for tasks
    const tasks = [
        // data for tasks of the "widgets" project
        { "id": "widgets", "project": "widgets", "text": "\u{1F389} DHTMLX widgets" },
        { "id": "gantt", "project": "widgets", "parent": "widgets", "text": "Gantt" },
        { "id": "scheduler", "project": "widgets", "parent": "widgets", "text": "Scheduler" },
        { "id": "diagram", "project": "widgets", "parent": "widgets", "text": "Diagram" },
        
        // data for tasks of the "introduction" project    
        {
            "id": "temp://1652991560212",
            "project": "introduction",
            "text": "Greetings, everyone! \u{1F44B} \nI'm DHTMLX To Do List."
        },
        {
            "id": "1652374122964",
            "project": "introduction",
            "text": "You can assign task performers and due dates using the menu.",
            "assigned": [ "user_2", "user_1", "user_3" ],
            "due_date": "2033-03-08T21:00:00.000Z"
        },
        {
            "id": "1652097809881",
            "project": "introduction",
            "text": "You can create tasks with an infinite number of subtasks.",
            "assigned": [ "user_2" ],
            "collapsed": false
        },
        {
            "id": "1652097809882",
            "project": "introduction",
            "parent": "1652097809881",
            "text": "Use the Tab and Shift + Tab keys for this.",
            "checked": false
        },
        {
            "id": "1652097809887",
            "project": "introduction",
            "parent": "1652097809881",
            "text": "Select and press Ctrl (Cmd) + Arrow up / Arrow down to change the task order.",
            "checked": false
        },
        // more task objects
    ];

    // data for users
    const users = [
        { "id": "user_1", "label": "Don Smith", "avatar": "../avatar_02.jpg" },
        { "id": "user_2", "label": "Nadia Chasey", "avatar": "../avatar_05.jpg" },
        { "id": "user_3", "label": "Mike Young", "avatar": "../avatar_21.jpg" },
        // more user objects
    ];

    // data for projects
    const projects = [
        { "id": "introduction", "label": "Introduction to DHTMLX To Do List" },
        { "id": "widgets", "label": "Our widgets" },
        // more project objects
    ];

    return { projects, users, tasks };
}

Now, you can populate the To Do List with data. For that, specify the related properties in the configuration object of the component:

index.html
<!DOCTYPE html>
<html>
    <head>
        <title>How to Start with To Do List</title>
        <script type="text/javascript" src="./dist/todo.js"></script>  
        <link rel="stylesheet" href="./dist/todo.css">

        <script src="../data.js"></script>
    </head>
    <body>
        <div id="toolbar"></div>
        <div id="root"></div>

        <script>
            const { ToDo, Toolbar } = todo;
            const { tasks, users, projects } = getData();

            const list = new ToDo("#root", {
                tasks,
                users,
                projects
            });
            const toolbar = new Toolbar("#toolbar", {
                api: list.api,
            });
        </script>
    </body>
</html>

You can find more information on loading data into To Do List in the Data loading article.

Step 4. Configure To Do List​

Now, you can define the desired configuration of the To Do list.

As you already know, To Do List consists of two separate interfaces: List and Toolbar. And each of them possesses a separate list of configuration options:

As an example, let's enable the readonly mode for your To Do List, specify an active project, and show only the search bar in the toolbar:

const list = new ToDo("#root", {
    tasks,
    users,
    projects,
    activeProject: "introduction",
    readonly: true
});

const toolbar = new Toolbar("#toolbar", {
    api: list.api,
    items: ["search"]
});

What's next​

Now you have a ready To Do List. You can load your own set of data, and configure the component to make it meet your needs

If you feel like diving deeper into the world of To Do List, these are suggestions for further studying: