Plugins

Plugins are additional features that can be configured using attributes defined for each plugin, and some plugins may use additional properties from data.

Enable a plugin

  1. Add the plugin module dependency to your application module dependencies list.

    angular.module('myApp', ['gantt', 'gantt.xxxxxx']);

  2. Add the plugin directive as a child element of the gantt directive.

    <div gantt>
    <gantt-xxxxxx></gantt-xxxxxx>
</div>

Supported plugins

  • Table

    Display row labels in multiple columns on the side.

  • Tree

    Display a tree hierarchy for rows.

  • Sortable

    Sort rows by drag & drop on rows label.

  • Movable

    Move and resize tasks.

  • Draw Task

    Draw new tasks with the mouse.

  • Progress

    Display a visual indicator showing configured progress of tasks.

  • Bounds

    Display configured bounds when moving mouse over a task.

  • Overlap

    Add a border with gantt-task-overlaps CSS class on tasks that overlaps.

  • Tooltips

    Display tooltips when moving mouse over a task.

  • Resize Sensor

    Use CSS-Element-Queries Polyfill to support dynamic resizing.

  • Labels DEPRECATED

    Display row labels on the side. (Use Table plugin instead)