jquery.gantt

A jquery plugin for creating a gantt chart.

Features

• Localizationable
• Easy configuration
• Lightweight (5KB gzipped)
• Works in all major browsers including IE11+

Compatibility

IE11+, Edge, Chrome, Firefox, Opera, Safari

Installation

NPM

npm install jquery.gantt

Github

git clone http://github.com/oguzhanoya/jquery-gantt.git

Configuration

Setting	Default Value	Description
data	[]	Data source
dataURL	''	Data source url
startDate	new Date()	Chart start date
endDate	new Date()	Chart end date
cellWidth	20	Width of the chart cell
cellHeight	38	Height of the chart cell
stickyHeader	false	Stick an header
mouseScroll	false	Enables slide moving with mouse
mouseScrollpx	120	Mouse scroll speed
lazyLoad	false	Lazy load technique
autoHide	false	Auto hiding of out of date events

Localization

The default l10n configuration format looks like this:

$.fn.gantt.l10n['en'] = {
    monthNames: [ "January","February","March","April","May","June","July","August","September","October","November","December" ],
    monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
    dayNames: [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ],
    dayNamesShort: [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ],
    dayNamesMin: [ "Su","Mo","Tu","We","Th","Fr","Sa" ]
};

You must provide 12 months and 7 weekdays (with abbreviations). Always specify weekdays in this order with Sunday first.

Source Configuration

[{
    "title": "Example",
    "startdate": "2016-06-10",
    "enddate": "2016-06-12",
    "url": "http://www.example.com/",
    "type": "Cruise",
    "minNight": "2",
    "price": {
        "original": {
            "price": 798,
            "priceType": "€"
        },
        "converted": {
            "price": 878,
            "priceType": "$"
        }
    },
    "tooltipData": {
        "title": "Example Tour",
        "image": "http://example.com/image.jpg",
        "desc": [
            "Lorem ipsum dolor sit amet",
            "consectetur adipisicing elit",
            "Explicabo repellat temporibus "
        ],
        "dates": {
            "begin": "10 June 2016 Friday",
            "end": "12 June 2016 Sunday"
        }
    }
}]

License

MIT