How-tos

You can read about general customization rules in the corresponding article.

Adding Progress Counter

If you want to track the progress of your tasks, you can customize ToDo to count the percentage of subtasks completed.

To add a progress counter, take the following steps:

create a new class called MyContextMenu and inherit it from todo.views["workspace"]. With the help of the custom GetProgressTemplate() method, you can count checked subtasks and add this result to a separate span:

class CustomWorkSpace extends todo.views["workspace"] {
    GetProgressTemplate(obj, common) {
        var percent = Math.round((obj.$checked / obj.$count_all) * 100);
        return `<span class="webix_todo_count">${percent}%</span>`;
    }
}

replace the default class with a custom one via the override map:

var app = new todo.App({
    data: base_data,
    users: users,
    projects: projects,
    override: new Map([
        [todo.views["workspace"], CustomWorkSpace]
    ]),
});
app.render(document.body);

Changing Date Format

To change the date format, take the following steps:

create a new class CustomWorkSpace by inheriting it from the todo.views["workspace"]. Inside, override the init() method to change the format:

class CustomWorkSpace extends todo.views["workspace"] {
    init(view) {
        super.init(view);
 
        this.Formats.myFormat = webix.Date.dateToStr("%d.%m.%Y");
        view.refresh();
    }
    GetDueDateFormat() {
        return this.Formats.myFormat || this.Formats.full;
    }
}

override the default "workspace" class:

var app = new todo.App({
    data: base_data,
    users: users,
    projects: projects,
    override: new Map([
        [todo.views["workspace"], CustomWorkSpace]
    ]),
});
app.render(document.body);