Skip to main content

taskShape

Description

Optional. An object with settings for the appearance of tasks

Usage

taskShape?: {
counter?: {
type: "percentage" | "number",
},
date?: {
format: string,
validate: boolean
},
completed?: {
behavior: "manual" | "auto",
taskHide: boolean
}
};

Default config

taskShape: {
counter: {
type: "number",
},
date: {
format: "%d %M %Y",
validate: true
},
completed: {
behavior: "auto",
taskHide: false
}
}

Parameters

To configure the task's appearance, you can specify the following parameters in the taskShape object:

  • counter - (optional) an object with settings for the counter of completed first-level subtasks:
    • type - (required) the type of display of the counter. There are two types:
      • "number" - the value of the counter is displayed as a ratio between two numbers: the number of completed subtasks and the total number of subtasks
      • "percentage" - the value of the counter is displayed as a percentage
  • date - (optional) an object with date settings:
    • format - (required) defines the format of displaying dates. By default, "%d %M %Y". The full list of available characters is given below
    • validate - (required) defines whether the due_date property of the task object should be validated
  • completed - (optional) an objet with settings for managing the marking and display of completed tasks. It takes one parameter:
    • behavior - (required) sets behavior for the parent and child tasks when marking them as completed/uncompleted. There are two options:
      • "auto" - enables the "auto" mode:
        • When you mark all child tasks as completed, the parent task automatically becomes marked as completed
        • When you mark the parent task as completed, all its child automatically become marked as completed
        • If you mark at least one child of a completed task as uncompleted, the task automatically becomes marked as uncompleted
        • If you mark the parent task as uncompleted, all its child automatically become uncompleted
      • "manual" - enables the "manual" mode. You need to manually mark each task (be it a child task or its parent) as completed
    • taskHide - (required) enables/disables the mode of hiding completed tasks from the list

Example

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

// create To do list
const list = new ToDo("#root", {
tasks,
users,
projects,
taskShape: {
counter: {
type: "percentage"
},
date: {
format: "%d %m %Y",
validate: false
},
completed: {
behavior: "manual",
taskHide: true
}
}
});

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

List of characters

DHTMLX To Do List uses the following characters for setting a date format:

CharacterDefinition
%dday as a number with leading zero, 01..31
%Dshort name of the day, Su Mo Tu...
%lfull name of the day, Sunday Monday Tuesday...
%mmonth as a number with leading zero, 01..12
%nmonth as a number, 1..12
%Mshort name of the month, Jan Feb Mar...
%Ffull name of the month, January February March...
%yyear as a number, 2 digits
%Yyear as a number, 4 digits
tip

Check the Localization article to learn how to present the date labels in the necessary language

Change log:

  • The selectable parameter was renamed to completed in v1.1
  • The taskHide option of the completed parameter was added in v1.1

Related articles:

Related samples: