jQuery.Gantt

# 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

## 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
`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")
`scale` | `"days"` | string ("months", "weeks", "days", "hours")
`maxScale` | `"months"` | string ("months", "weeks", "days", "hours")
`minScale` | `"hours"` | string ("months", "weeks", "days", "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

## 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.