jQuery.Gantt — Draw Gantt charts with the famous jQuery ease of development

Contributors

Marek Bielańczuk wrote the original jQuery.Gantt plugin that this version is based off of.
Tait Brown enforced stricter code guidelines by validating the code, updating it to support HTML5 and tweaking the design.
Leo Pfeifenberger made major performance updates as well as adding requested features such as click events, state persisting via cookies and scrollToToday on load functionality.
Grzegorz Russek helped fix the White Whale of a bug that prevented the hour view rendering correctly. Nice one.
Many more from the GitHub community

Example

Original version Bootstrap button version

itemsPerPage:

navigate:

navigationPosition:

scale:

minScale:

maxScale:

scrollToToday:

highlightRow:

snapToGrid:

useCookie:

Open data input form

name	desc	from	to	label	customCLass	delete

Gantt Configuration

$(".selector").gantt({
    source: "ajax/data.json",
    scale: "weeks",
    minScale: "weeks",
    maxScale: "months",
    onItemClick: function(data) {
        alert("Item clicked - show some details");
    },
    onAddClick: function(dt, rowId) {
        alert("Empty space clicked - add an item!");
    },
    onRender: function() {
        console.log("chart rendered");
    }
});

Parameter	Default	Accepts Type
`source`	`[]`	Array, string (url)
`itemsPerPage`	`7`	number
`itemsPerPageSelect`	`[]`	Array of numbers
`months`	`["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]`	Array (12 strings representing the months of the year)
`dow`	`["S", "M", "T", "W", "T", "F", "S"]`	Array (7 strings representing the days of the week)
`holidays`	`undefined`	Array of numbers (ms), date strings (see formats), or Date objects
`navigate`	`"buttons"`	string ("buttons", "scroll")
`navigationPosition`	`"bottom"`	string ("top", "bottom")
`scale`	`"days"`	string ("months", "weeks", "days", "hours12", "hours6", "hours3", "hours")
`maxScale`	`"months"`	string ("months", "weeks", "days", "hours12", "hours6", "hours3", "hours")
`minScale`	`"hours"`	string ("months", "weeks", "days", "hours12", "hours6", "hours3", "hours")
`waitText`	`"Please wait..."`	string
`onItemClick`	`function (data) { return; }`	Function called when clicking on a Gantt item. The parameter passed to the function is the dataObj of the source item, if one was provided.
`onAddClick`	`function (dt, rowId) { return; }`	Function called when clicking on empty space inside the Gantti data panel. The parameter passed to the function is the date/time in milliseconds for the clicked cell, and the ID of the source object (row), if one was provided.
`onRender`	`$.noop`	Function called whenever the chart is (re)rendered
`useCookie`	`false`	indicates whether or not cookies should be used to save and restore the chart's view state (scale, scroll position) between page loads; `jquery.cookie` needs to be referenced for this to work
`cookieKey`	`"jquery.fn.gantt"`	The prefix used when storing cookies (depends on useCookie being set to `true`)
`scrollToToday`	`true`	Boolean
`highlightRow`	`true`	Boolean

Source Configuration

source: [
    {
        name: "Example",
        desc: "Lorem ipsum dolor sit amet.",
        values: [ ... ]
        id: 1,
        cssClass: "redLabel"
    },
    ... // more rows
]

Parameter	Accepts Type	Meaning
`name`	string	Optional primary label for this row of values; appears in the leftmost column of the row.
`desc`	string	Optional secondary label for this row of the Gantt.
`values`	Array	Sequence of date ranges for each row of the Gantt. See table below.
`id`	string or number	Optional value to be passed as second parameter to `onAddClick()` callback when triggered.
`cssClass`	string	Optional space-separated class names to be applied to this row's labels.

Value Configuration

values: [
    {
        from: "/Date(1333411200000)/",
        to: "/Date(1328832000000)/",
        label: "Example Value",
        desc: "Something",
        customClass: "ganttRed",
        dataObj: foo.bar[i]
    },
    ... // more items for the row (though Gantt charts traditionally have only one item per row)
]

Parameter	Accepts Type	Meaning
`from`	number (ms), string (see formats)	Start date/time of the Gantt item.
`to`	number (ms), string (see formats)	End date/time of the Gantt item.
`label`	string	Optional label/name of the Gantt item.
`desc`	string	Optional description of the Gantt item, used as HTML content of hover "hint").
`customClass`	string	Optional space-separated class names to be applied to the Gantt item.
`dataObj`	Any	Optional data object that is stored directly on the Gantt item.