A simple, lightweight jQuery gantt plugin.
npm install jquery.gantt
> A jquery plugin for creating a gantt chart.
sh
npm install jquery.gantt
`
Github
sh
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:`javascript
$.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
javascript
[{
"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"
}
}
}]
``