Перейти к основному содержимому

taskShape

Описание​

Необязательный. Объект с настройками внешнего вида задач

Использование​

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

Конфигурация по умолчанию​

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

Параметры​

Для настройки внешнего вида задачи можно указать следующие параметры в объекте taskShape:

  • counter - (необязательный) объект с настройками счётчика выполненных подзадач первого уровня:
    • type - (обязательный) тип отображения счётчика. Доступны два типа:
      • "number" — значение счётчика отображается в виде отношения двух чисел: количества выполненных подзадач к общему числу подзадач
      • "percentage" — значение счётчика отображается в процентах
  • date - (необязательный) объект с настройками даты:
    • format - (обязательный) задаёт формат отображения дат. По умолчанию — "%d %M %Y". Полный список доступных символов приведён ниже
    • validate - (обязательный) определяет, должно ли свойство due_date объекта задачи проходить валидацию
  • completed - (необязательный) объект с настройками управления отметкой и отображением выполненных задач. Принимает один параметр:
    • behavior - (обязательный) задаёт поведение родительских и дочерних задач при отметке их как выполненных/невыполненных. Доступны два варианта:
      • "auto" — включает режим "auto":
        • При отметке всех дочерних задач как выполненных родительская задача автоматически отмечается как выполненная
        • При отметке родительской задачи как выполненной все её дочерние задачи автоматически отмечаются как выполненные
        • Если хотя бы одна дочерняя задача выполненной задачи отмечается как невыполненная, задача автоматически снимается с отметки
        • При отметке родительской задачи как невыполненной все её дочерние задачи автоматически становятся невыполненными
      • "manual" — включает режим "manual". Каждую задачу (как дочернюю, так и родительскую) необходимо отмечать как выполненную вручную
    • taskHide - (обязательный) включает/отключает режим скрытия выполненных задач из списка
  • priority - (необязательный) — объект с настройками отображения приоритета. Можно указать следующие параметры:
    • cover - (обязательный) — определяет, показывать ли обложку приоритета
    • label - (обязательный) — определяет, показывать ли метку приоритета

Пример​

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

// создание To Do List
const list = new ToDo("#root", {
    tasks,
    users,
    projects,
    priorities,
    taskShape: {
        counter: {
            type: "percentage",
        },
        date: {
            format: "%d %m %Y",
            validate: false,
        },
        completed: {
            behavior: "manual",
            taskHide: true,
        },
        priority: {
            cover: true,
            label: false,
        }
    }
});

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

Список символов​

DHTMLX To Do List использует следующие символы для задания формата даты:

СимволОписание
%dдень в виде числа с ведущим нулём, 01..31
%jдень в виде числа, 1..31
%Dкраткое название дня недели, Su Mo Tu...
%lполное название дня недели, Sunday Monday Tuesday...
%mмесяц в виде числа с ведущим нулём, 01..12
%nмесяц в виде числа, 1..12
%Mкраткое название месяца, Jan Feb Mar...
%Fполное название месяца, January February March...
%yгод в виде числа, 2 цифры
%Yгод в виде числа, 4 цифры
совет

Прочитайте статью Локализация, чтобы узнать, как отображать метки дат на нужном языке

История изменений:

  • Параметр priority добавлен в v1.2

Связанные статьи:

Связанные примеры:

Need more help?Contact Support