Dynamic Customizable Gantt Chart Plugin - jQuery ganttChart

ganttChart is an easy-to-use jQuery plugin that lets you create a dynamic, customizable gantt chart to visualize your schedules (activities/tasks/events) in a horizontal, scrollable bar chart.

How to use it:

1. Load the necessary jQuery and ImprovedDate libraries in the webpage.

<link rel="stylesheet" href="jquery.ganttChart-min.css">
<script src="jquery.ganttChart.min.js"></script>

2. Add the jQuery ganttChart plugin's JavaScript and CSS files to the webpage.

<link rel="stylesheet" href="jquery.ganttChart-min.css">
<script src="jquery.ganttChart.min.js"></script>

3. Call the function and define your own events displayed in the gantt chart.

<div id="demo"></div>

$('#demo').ganttChart ({
  events: [{
    startDate : new Date( new Date().getTime() - 2*86400000 ),
    endDate   : new Date( new Date().getTime() + 4*86400000 ),
    title     :  'event 1',
    href      :  '#',
    style     : '.your-css'
  },
  {
    startDate : new Date( new Date().getTime() - 4*86400000 ),
    endDate   : new Date( new Date().getTime() + 2*86400000 ),
    title     :  'event 2',
    href      :  '#',
    style     : '.your-css'
  },
  // more events here
  ],
});

4. Set the start/end dates of the gantt chart.

$('#demo').ganttChart ({
  startDate: new Date( new Date().getTime() - 15*86400000 ),
  endDate: new Date( new Date().getTime() + 45*86400000 ),
});

5. Localize the gantt chart as these.

$('#demo').ganttChart ({
  lang: {
    months: [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ],
    days: [ 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
  },
});

6. Customize the HTML template so that you can easily style the gantt chart in the CSS.

$('#demo').ganttChart ({
  tmpl: {
    month : '<div class="example-month"></div>',
    week  : '<div class="example-week">W</div>',
    date  : '<div class="example-date"></div>',
    day   : '<div class="example-day"></div>',
    col   : '<div class="example-col"></div>',
    row   : '<div class="example-row"></div>',
    event : '<div class="example-event"></div>'
  }
});

---

This awesome jQuery plugin is developed by E-SYSTEMES. For more Advanced Usages, please check the demo page or visit the official website.