🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Gantt is a jQuery plugin that helps you dynamically draw a customizable Gantt Chart to plan, coordinate, and track specific schedules/tasks in a horizontal bar chart.

Schedule gantt-chart

Documentation

jquery-gantt

License: MIT

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


You May Also Like