Gantt features
Features are classes that add functionality to the Gantt. The purpose of this guide is to give an overview of the features that ships with Gantt and show how you can configure them.
Bryntum Gantt is based on the Bryntum Grid (API docs) and inherit from it various extra functionality, like cell editing, column resizing, etc. Such extra functionality is called "feature". Please refer to this guide (API docs) for general information about using the features in the Bryntum Grid.
If you want to create a custom feature, head over to GridFeatureManager docs.
Built-in features
In addition to the features in Grid, Gantt also comes with the following features included:
AI (API docs)
This feature provides an AI agent for Gantt which allows the user to use natural language to interact with the Gantt in different ways. The feature and all its related components are marked as experimental and are subject to change.
This feature is disabled by default.
Baselines (API docs)
Displays a task's baselines below the tasks in the timeline.
This feature is disabled by default.
CellEdit (API docs)
Extends the CellEdit to encapsulate Gantt functionality.
This feature is enabled by default.
CriticalPaths (API docs)
This feature highlights the project critical paths.
This feature is enabled by default.
Dependencies (API docs)
Draws dependency lines between tasks in the Gantt chart.
This feature is enabled by default.
Indicators (API docs)
The Indicators feature displays indicators (icons) for different dates related to a task in its row.
This feature is disabled by default.
Labels (API docs)
Specialized version of the Labels feature for Scheduler, that handles labels for tasks in Gantt.
This feature is disabled by default.
MspExport API Docs
A feature that allows exporting Gantt to Microsoft Project without involving a server.
This feature is disabled by default.
ParentArea (API docs)
Highlights the area encapsulating all child tasks of a parent task in a semi-transparent layer.
This feature is disabled by default.
PdfExport API Docs
Generates PDF/PNG files from the Gantt component.
This feature is disabled by default.
Print API Docs
Allows printing Gantt contents using browser print dialog.
This feature is disabled by default.
ProgressLine (API docs)
This feature draws project progress line with SVG lines.
This feature is disabled by default.
ProjectEdit (API docs)
Shows a dialog allowing user to edit the project information.
This feature is disabled by default.
ProjectLines (API docs)
Draws two vertical lines in the timeline area to highlight project start/end dates.
This feature is enabled by default.
Rollups (API docs)
If the task's rollup data field is set to true, it displays a small bar or diamond below its summary task in the timeline.
This feature is disabled by default.
ScrollButtons (API docs)
This feature injects buttons in each row that scrolls the task bar into view.
This feature is disabled by default.
Summary (API docs)
A feature displaying a summary bar in the grid footer.
This feature is disabled by default.
TaskCopyPaste (API docs)
Allow using [Ctrl/CMD + C/X] and [Ctrl/CMD + V] to copy/cut and paste tasks.
This feature is enabled by default.
TaskDrag (API docs)
Allows user to drag tasks in the timeline, to update the start date.
This feature is enabled by default.
TaskDragCreate (API docs)
Allows user to schedule an unscheduled task by dragging in its empty timeline row area.
This feature is enabled by default.
TaskEdit (API docs)
Shows a dialog allowing user to edit the task information. The default Task Editor is fully customizable, allowing you to add custom fields and tabs to fit your specific requirements.
This feature is enabled by default.
TaskMenu (API docs)
Equips the Gantt chart with a customizable context menu (available on right click).
This feature is enabled by default.
TaskNonWorkingTime (API docs)
Feature highlighting the non-working time intervals for tasks, based on their calendar.
This feature is disabled by default.
TaskResize (API docs)
Allows a user to "resize" (change the duration) of the task, by dragging its end date.
This feature is enabled by default.
TaskSegmentDrag (API docs)
Allows user to drag and drop task segments, to change their start date.
This feature is enabled by default.
TaskSegmentResize (API docs)
Feature that allows resizing a task segment by dragging its end.
This feature is enabled by default.
TaskTooltip (API docs)
Displays some task information in a tooltip when hovering the task bar.
This feature is enabled by default.
TimelineChart (API docs)
Shows s-curve chart in the timeline area.
This feature is disabled by default.
TreeGroup (API docs)
Extends Grid's TreeGroup (follow the link for more info) feature to enable using it with Gantt.
This feature is disabled by default.
Versions (API docs)
Captures versions (snapshots) of the active project, including a detailed log of the changes new in each version.
This feature is disabled by default.
Gantt can also use the following features from Scheduler:
ColumnLines (API docs)
Draws lines at the columns (ticks) in the timeaxis. Major ticks can have a different color than normal.
This feature is enabled by default.
The demo below shows the default ColumnLines configuration, note the darker line between weeks:
const scheduler = new Scheduler({ appendTo : targetElement, autoHeight : true, rowHeight : 40, barMargin : 4, startDate : new Date(2018, 4, 6), endDate : new Date(2018, 4, 20), viewPreset : { base : 'dayAndWeek', timeColumnWidth : 30 }, columns : [ { field : 'name', text : 'Name', width : 100 } ], resources : [ { id : 1, name : 'Bernard' }, { id : 2, name : 'Bianca' } ], events : [ { id : 1, resourceId : 1, name : 'Interview', startDate : '2018-05-06', endDate : '2018-05-07' }, { id : 2, resourceId : 1, name : 'Press meeting', startDate : '2018-05-08', endDate : '2018-05-09' }, { id : 3, resourceId : 2, name : 'Audition', startDate : '2018-05-07', endDate : '2018-05-09' }, { id : 4, resourceId : 2, name : 'Script deadline', startDate : '2018-05-11', endDate : '2018-05-11' } ] }); HeaderZoom API Docs
Enables users to click and drag to zoom to a date range in Scheduler's header time axis. Only supported in horizontal mode.
This feature is disabled by default.
NonWorkingTime (API docs)
Can be used to highlight weekends or other non working days. By default gives them a grayish background color, to distinguish them from normal days.
This feature is disabled by default.
Note that saturday and sunday have a tinted background in the demo:
const scheduler = new Scheduler({ appendTo : targetElement, autoHeight : true, rowHeight : 40, barMargin : 4, features : { nonWorkingTime : true }, startDate : new Date(2018, 4, 6), endDate : new Date(2018, 4, 13), columns : [ { field : 'name', text : 'Name', width : 100 } ], resources : [ { id : 1, name : 'Bernard' }, { id : 2, name : 'Bianca' } ], events : [ { id : 1, resourceId : 1, name : 'Sunday', startDate : '2018-05-07', endDate : '2018-05-08', iconCls : 'fa fa-arrow-left' }, { id : 2, resourceId : 2, name : 'Saturday', startDate : '2018-05-11', endDate : '2018-05-12', iconCls : 'fa fa-arrow-right' } ] }); Pan API Docs
Makes the scheduler's timeline pannable by dragging with the mouse. Try it out in the demo below.
This feature is disabled by default.
TimeAxisHeaderMenu (API docs)
Displays a context menu for the timeaxis header. The menu is populated by other features.
This feature is enabled by default.
Right click on the timeaxis header to display the context menu:
const scheduler = new Scheduler({ appendTo : targetElement, autoHeight : true, rowHeight : 40, barMargin : 4, startDate : new Date(2018, 4, 6), endDate : new Date(2018, 4, 13), columns : [ { field : 'name', text : 'Name', width : 100 } ], resources : [ { id : 1, name : 'Bernard' }, { id : 2, name : 'Bianca' } ], events : [ { id : 1, resourceId : 1, name : 'Interview', startDate : '2018-05-07', endDate : '2018-05-10' }, { id : 2, resourceId : 2, name : 'Meeting', startDate : '2018-05-10', endDate : '2018-05-12' } ] }); TimeRanges (API docs)
Add highlighted time ranges (lines and zones) to the schedule. Can also display a line showing the current time.
This feature is disabled by default.
Drag the handles in the header to resize or move (with SHIFT) then TimeRange:
const first = DateHelper.startOf(new Date(), 'week'); const scheduler = new Scheduler({ appendTo : targetElement, autoHeight : true, rowHeight : 40, barMargin : 4, features : { timeRanges : { showCurrentTimeLine : true, showHeaderElements : true, enableResizing : true } }, startDate : first, endDate : DateHelper.add(first, 7, 'days'), columns : [ { field : 'name', text : 'Name', width : 100 } ], resources : [ { id : 1, name : 'Bernard' }, { id : 2, name : 'Bianca' } ], events : [ { id : 1, resourceId : 1, name : 'Interview', startDate : first, duration : 2, durationUnit : 'day' }, { id : 2, resourceId : 1, name : 'Press meeting', startDate : DateHelper.add(first, 4, 'days', true), duration : 2, durationUnit : 'day' }, { id : 3, resourceId : 2, name : 'Audition', startDate : DateHelper.add(first, 1, 'days'), duration : 2, durationUnit : 'day' }, { id : 4, resourceId : 2, name : 'Script deadline', startDate : DateHelper.add(first, 5, 'days'), duration : 2, durationUnit : 'day' } ], timeRanges : [ { id : 1, name : 'Range', startDate : DateHelper.add(first, 2, 'days'), duration : 1, durationUnit : 'day' } ] }); Importing features from sources
A feature is registered when the application imports it. When using the regular module/umd bundle, this is done automatically, as the bundle encapsulates all code inside. However, when utilizing sources or thin bundles, a feature might not be imported by default. For any feature not enabled by default, it is essential to ensure that you have imported it to be able to use it.
Example:
import Gantt from 'PATH_TO_SOURCE/Gantt/view/Gantt.js';
import 'PATH_TO_SOURCE/Gantt/feature/Baselines.js';
const gantt = new Gantt({
features : {
baselines : {
// feature config
}
}
});