Upgrade guides for Gantt v2.0.0+

Gantt v2.0

"Core" package

All our basic classes have been moved from lib/Common/ to lib/Core/. Please update corresponding paths in your application in case you import classes from sources.

Zooming and ViewPresets

The system-supplied set of ViewPresets, and the way these can be customized has changed slightly.

A ViewPreset describes the time units into which a timeline is split, and the on-screen size of the lowest level unit. It also contains a definition of the layout of a set of headers to display above the timeline.

The header definitions are now an array, headers instead of headerConfig. These are processed in top to bottom order. This is a change from before, when they were named properties in an object with the name "middle", wherever it was in the list, at the top or the bottom being the one which attracted the "main header" status. Now mainHeaderLevel and columnLinesFor are numeric configs which reference which header level is the main one, and which defines the column lines.

The system-supplied set of ViewPresets is still the same. There is a set of predefined ViewPresets stored in the PresetManager, which is now a Store.

System-supplied ViewPresets

secondAndMinute - creates 2 level header - minute and seconds within it.
minuteAndHour - creates 2 level header - hour and minutes within it.
hourAndDay - creates 2 level header - day and hours within it.
dayAndWeek - creates 2 level header - week and days within it.
weekAndDay - just like dayAndWeek but with different formatting.
weekAndDayLetter - creates 2 level header - with weeks and day letters within it.
weekAndMonth - creates 2 level header - month and weeks within it.
weekDateAndMonth - creates 2 level header - month and weeks within it (weeks shown by first day only).
monthAndYear - creates 2 level header - year and months within it.
year - creates 2 level header - year and quarters within it.
manyYears - creates 2 level header - 5-years and year within it.

Presets automatically copied into each Gantt

Gantt now import an expanded, preconfigured set of these standard ViewPresets into their own PresetStore which is accessed using myGantt.presets.

A PresetStore is automatically sorted into zoom order. That is, it is sorted according to the widths of events rendered to the screen as a result of their configurations.

These encapsulate the zoom levels which are available. A zoom level now is a ViewPreset. There is a direct mapping between a numeric zoom level and a ViewPreset in the Gantt's presets - it is simply the index of the ViewPreset in the Gantt's presetsStore.

A new ViewPreset may be added to a preset store which is either fully configured, or which is based upon one of the predefined presets mentioned in the PresetManager's API docs.

so you may do

myGantt.viewPreset = {
    base            : 'hourAndDay', // Based existing preset id. See above or PresetManager docs
    tickWidth       : 25,
    columnLinesFor  : 0,
    mainHeaderLevel : 1,
    headers         : [
        {
            unit       : 'd',
            align      : 'center',
            dateFormat : 'ddd DD MMM'
        },
        {
            unit       : 'h',
            align      : 'center',
            dateFormat : 'HH'
        }
    ]
};

This adds a new ViewPreset to the Gantt which is a slightly reconfigured version of the system-supplied hourAndDay preset. It will be inserted into the store in zoom-level order, and will become another zoom level.

Notice that the headers are now configured as an array, and are displayed in the order specified.

The attachment of column lines to a specific header level is now explicit rather than relying on which header was configured under the property name "middle".

Making application-wide changes

For an application-wide addition of a new preset, use

PresetManager.add({
    id              : 'myNewPreset',
    base            : 'hourAndDay', // Based on an existing preset
    tickWidth       : 25,
    columnLinesFor  : 0,
    mainHeaderLevel : 1,
    headers         : [
        {
            unit       : 'd',
            align      : 'center',
            dateFormat : 'ddd DD MMM'
        },
        {
            unit       : 'h',
            align      : 'center',
            dateFormat : 'HH'
        }
    ]
});

After that, Gantt will contain that preset in their presets Store, and it will be part of the available zoom levels. Not forgetting, above: "A PresetStore is automatically sorted into zoom order".

You could then either add that new preset directly to a Gantt, or, as in the first example given above, add a preset to a Gantt using base : 'myNewPreset' to create a slightly modified version of that preset.

Examples

Old code:

PresetManager.registerPreset('dayNightShift', {
    tickWidth         : 35,
    rowHeight         : 32,
    displayDateFormat : 'HH:mm',
    shiftIncrement    : 1,
    shiftUnit         : 'day',
    timeResolution    : {
        unit      : 'minute',
        increment : 15
    },
    defaultSpan  : 24,
    headerConfig : {
        bottom : {
            unit       : 'hour',
            increment  : 1,
            dateFormat : 'H'
        },
        middle : {
            unit      : 'hour',
            increment : 12,
            renderer(startDate, endDate, headerConfig, cellIdx) {
                if (startDate.getHours() === 0) {
                    // Setting a custom CSS on the header cell element
                    headerConfig.headerCellCls = 'b-fa b-fa-moon';
                    return DateHelper.format(startDate, 'MMM DD') + ' Night Shift';
                }
                else {
                    // Setting a custom CSS on the header cell element
                    headerConfig.headerCellCls = 'b-fa b-fa-sun';
                    return DateHelper.format(startDate, 'MMM DD') + ' Day Shift';
                }
            }
        },
        top : {
            unit       : 'day',
            increment  : 1,
            dateFormat : 'MMMM Do YYYY'
        }
    }
});

New code:

PresetManager.registerPreset('dayNightShift', {
    name              : 'Day/night shift (custom)',
    tickWidth         : 35,
    rowHeight         : 32,
    displayDateFormat : 'HH:mm',
    shiftIncrement    : 1,
    shiftUnit         : 'day',
    timeResolution    : {
        unit      : 'minute',
        increment : 15
    },
    defaultSpan     : 24,
    mainHeaderLevel : 1,
    headers         : [
        {
            unit       : 'day',
            increment  : 1,
            dateFormat : 'MMMM Do YYYY'
        },
        {
            unit      : 'hour',
            increment : 12,
            renderer(startDate, endDate, headerConfig, cellIdx) {
                if (startDate.getHours() === 0) {
                    // Setting a custom CSS on the header cell element
                    headerConfig.headerCellCls = 'b-fa b-fa-moon';
                    return DateHelper.format(startDate, 'MMM DD') + ' Night Shift';
                }
                else {
                    // Setting a custom CSS on the header cell element
                    headerConfig.headerCellCls = 'b-fa b-fa-sun';
                    return DateHelper.format(startDate, 'MMM DD') + ' Day Shift';
                }
            }
        },
        {
            unit       : 'hour',
            increment  : 1,
            dateFormat : 'H'
        }
    ]
});

Notice that the headers are configured as an array, and instead of the property name middle attracting "main header" status, and therefore dictating the tick size, the mainHeaderLevel is explicitly defined as an index.

Export to PDF/PNG

Added a new feature which allows exporting Gantt content into a PDF/PNG file. Several new demos are added: a generic JS example and demos for Angular, React and Vue frameworks. The feature uses a special export server, that can be found in examples/_shared/server folder. For more instruction please see README.md file in the demos folders.

Gantt v2.0.4

PercentDoneCircleColumn

PercentDoneCircleColumn is deprecated and will be removed in a future release, use PercentDoneColumn instead with showCircle config enabled.

Gantt v2.1.0

Deadline field & column

TaskModel has a new field called deadlineDate. The field does not affect any calculations, it is purely for visualization in the new DeadlineColumn and/or using the new Indicators feature described below.

// A new field
taskRecord.deadlineDate = new Date(2020, 1, 21);

// And a new column
new Gantt({
  columns : [
    { type : 'deadlinedate' }
  ]
});

Indicators

A new feature showing indicators in a task row. The following indicators are available out of the box:

Early start/end dates (earlyDates)
Late start/end dates (lateDates)
Constraint date (constraintDate)
Deadline date (deadlineDate)

By default all indicators are active when enabling the feature. Configure active indicators using the items config:

new Gantt({
  features : {
    indicators : {
      items : {
        // Enable Early start/end dates
        earlyDates : true,
        // Disable Late start/end dates
        lateDates  : false
      }
    }
  }
});

It is also possible to add custom indicators using the same config. Supply it one or more functions that accepts a task record and returns a TimeSpan (or its config) or null:

new Gantt({
  features : {
    indicators : {
      items : {
        lateDates  : false,

        // Custom indicator only shown for tasks more than half done
        myCustomIndicator : taskRecord => taskRecord.percentDone > 50 ? {
           // Put it 2 days after the task
           startDate : DateHelper.add(taskRecord.endDate, 2, 'days'),
           // Name is displayed with the date in the tooltip
           name : 'My custom indicator',
           // Accepts an icon cls
           iconCls : 'b-fa b-fa-alien'
        } : null
      }
    }
  }
});

Deprecations

The tplData parameter passed to taskRenderer was renamed to renderData to better reflect its purpose. If you are using it in your code, please rename it.