displays an additional layer with custom elements for a task in the timeline area

string addTaskLayer(function|object func);


funcfunction|objecta render function or a config object


stringa DOM element that will be displayed in the layer

Available only in PRO Edition


gantt.addTaskLayer(function draw_deadline(task) {
    if (task.deadline) {
        var el = document.createElement('div');
        el.className = 'deadline';
        var sizes = gantt.getTaskPosition(task, task.deadline);
 = sizes.left + 'px'; = + 'px';
        el.setAttribute('title', gantt.templates.task_date(task.deadline));
        return el;
    return false;

Related samples


This functionality is available in the PRO edition only.

  • The argument function takes a task's object as a parameter and must return a DOM element that will be displayed in the layer.
  • The argument can also be an object. In this case, it can have the following properties:
    • renderer - (function) a function that answers for rendering the layer's elements (mandatory)
    • container - (HTMLElement) a layer's container (optional)
    • topmost - (boolean) if true, the element will be displayed over the task (optional)
    • filter - (function) a function that takes a task object as a parameter. If returns 'false', the 'renderer' function won't be called for a task (optional)
  • Beware, custom layers will be reset after the next call of gantt.init
See also
Back to top