jquery.gantt

by bizamajig

HTML

<script src="http://taitems.github.io/jQuery.Gantt/js/jquery.fn.gantt.js"></script>
<link rel="stylesheet" href="http://taitems.github.io/jQuery.Gantt/css/style.css">
<div class="gantt"></div>

CSS

.myGanttGray{
    background-color:whitesmoke;
    border:1px dashed gray;
}

JavaScript

$(".gantt").gantt({
    source: [{
        name: "a",
        desc: "Test",
        values: [{
            from: Date.parse("6/1/2014"), //Date(123456)
            to: Date.parse("7/1/2014"),
            label: "Task 1"
            ,customClass: "ganttRed"
        },{
            from: Date.parse("7/2/2014"),
            to: Date.parse("7/25/2014"),
            label: "Task 2"
            ,customClass: "ganttGreen"
        }]
    },{
        name: "b",
        desc: "Test",
        values: [{
            from: Date.parse("7/1/2014"),
            to: Date.parse("7/15/2014"),
            label: "Task 1"
            ,customClass: "ganttBrown"
        },{
            from: Date.parse("9/2/2014"),
            to: Date.parse("9/11/2014"),
            label: "Task 2"
            ,customClass: "myGanttGray"
        }]
    }],
    navigate: "buttons",
    scale: "weeks"
});