jQuery-ganttChart

ganttChart is a plugin for jQuery built around ease of use. It supports the customization and use of frameworks like Bootstrap.

Download production version Download development version
current version : 1.0.0

This project is hosted on Github. Please use the project's issue tracker to report bugs.

Live demo

Getting Started

Requirements

The plugin requires the ImprovedDate object. You can download the last release here

Events

Events are objects with the following properties:

startDate: a Date object
endDate: a Date object
title: a string displayed in the event
url: an optional string wich transforms the event title into a link
style: an optional string to add a css class to the event ( see theming below )

In your html:

<!-- include jquery.ganttChart CSS -->
<link rel="stylesheet" href="css/jquery.ganttChart-min.css">

<!-- ganttChart wrapper -->
<div id="ganttChart"></div>

<!-- Add required improvedDate  -->
<script src="js/jquery.improvedDate.min.js"></script>

<!-- Add jquery.ganttChart plugin -->
<script src="js/jquery.ganttChart.min.js"></script>

In your javaScript:

// instanciate the gantt chart
$('#ganttChart').ganttChart( {
  startDate: new Date(), // the starting date of the chart
  endDate: new Date(), // the ending date of the chart
  events: [ // Array of the events
    {
      startDate: new Date(), // the starting date of the event
      endDate: new Date(), // the ending date of the event
      title: 'string', // title of the event
      url: 'string', // optional - link the event to an url
      style: 'string' // optional - class for styling the event
    }
  ]
} );

Tranlation

You can use the lang option to translate month and day names.

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

Option	Type	Default	Description
lang	Object	{months, days}	The names of the months and days
lang.months	Array	['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']	The names of the months
lang.days	Array	['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']	The names of the days

Theming

Customize jquery.ganttChart plugin with our template options for global style preferences for easy theming and component changes.

Show / hide components of the chart's header

// instanciate the gantt chart
$('#ganttChart').ganttChart( {
// dates and events,
  tmpl: {
    display:{
      months: true, // set to false to hide
      weeks: true, // set to false to hide
      dates: true, // set to false to hide
      days: true // set to false to hide
    }
  }
} );

Sizing cells and events

// instanciate the gantt chart
$('#ganttChart').ganttChart( {
// dates and events,
  tmpl: {
    cell:{
      width: 20,
      height: 40
    },
    margin: 5
  }
} );

Styling the chart's components

Change the html elements and add your personal css classes to the chart's components

This is the ganttChart's components structure:

Gantt-container
├── Gantt-header
│   ├── Gantt-months
│   │   ├── Gantt-month // personalize these components with tmpl.month
│   │   │   …
│   │   └── Gantt-month
│   ├── Gantt-weeks
│   │   ├── Gantt-week // personalize these components with tmpl.week
│   │   │   …
│   │   └── Gantt-week
│   ├── Gantt-dates
│   │   ├── Gantt-date // personalize these components with tmpl.date
│   │   │   …
│   │   └── Gantt-date
│   ├── Gantt-days
│   │   ├── Gantt-day // personalize these components with tmpl.day
│   │   │   …
│   │   └── Gantt-day
└── Gantt-events
    ├── Gantt-cols
    │   ├── Gantt-col // personalize these components with tmpl.col
    │   │   …
    │   └── Gantt-col
    ├── Gantt-rows
    │   ├── Gantt-row // personalize these components with tmpl.row
    │   │   …
    │   └── Gantt-row
    ├── Gantt-event // personalize these components with tmpl.event
    │   …
    └── Gantt-event

The options to modify the components:

// instanciate the gantt chart
$('#ganttChart').ganttChart( {
// dates and events,
  tmpl: {
    month : '<div></div>', // component for Gantt-month
    week  : '<div></div>', // component for Gantt-week
    day   : '<div></div>', // component for Gantt-day
    date  : '<div></div>', // component for Gantt-date
    col   : '<div></div>', // component for Gantt-col
    row   : '<div></div>', // component for Gantt-row
    event : '<div></div>' // component for Gantt-event
  }
} );

tmpl reference

Option	Type	Default	Description
display	Object	{months, weeks, days}	Show / hide the differents parts of the chart's header
display.months	Bool	True	Show / hide the month names in chart's header
display.weeks	Bool	True	Show / hide the week numbers in chart's header
display.dates	Bool	True	Show / hide the day names in chart's header
display.days	Bool	True	Show / hide the day names in chart's header
cell	Object	{width:20, height:40}	the size of the chart's cells
margin	Number	5	The vertical margin for the Gantt-event component
month	String	'<div></div>'	The html element for the Gantt-month component
week	String	'<div></div>'	The html element for the Gantt-week component
date	String	'<div></div>'	The html element for the Gantt-date component
day	String	'<div></div>'	The html element for the Gantt-day component
col	String	'<div></div>'	The html element for the Gantt-col component
row	String	'<div></div>'	The html element for the Gantt-row component
event	String	'<div></div>'	The html element for the Gantt-event component

Licence

Licensed under the MIT license.