jQuery

DayPilot includes a jQuery plugin that will let you create and initialize the Gantt chart component using jQuery.

JavaScript

Demo

• jQuery Gantt Chart Demo

Example

<div id="dp"></div>
      
<script type="text/javascript">

  $(document).ready(function() {
      $("#dp").daypilotGantt({
          columns: [
              {
                  title: "Name",
                  width: 50,
                  property: "text"
              },
              {
                  title: "Info",
                  width: 50,
                  property: "info"
              },
              {
                  title: "Duration",
                  width: 50,
                  format: function(args) {
                      var duration = new DayPilot.TimeSpan(new DayPilot.Date(args.task.end).getTime() - new DayPilot.Date(args.task.start).getTime());
                      return duration.toString("d") + "d " + duration.toString("h") + "h";
                  }
              }
          ],
          tasks:[
              {
                  start: "2014-10-01",
                  end: "2014-10-03",
                  id: DayPilot.guid(),
                  text: "Group 1",
                  tags: {
                      info: "info text"
                  },
                  children: [
                      {
                          start: "2014-10-01",
                          end: "2014-10-03",
                          id: DayPilot.guid(),
                          text: "Subtask 1",
                          complete: Math.floor(Math.random() * 101) // 0 to 100
                      },
                      {
                          start: "2014-10-01",
                          end: "2014-10-03",
                          id: DayPilot.guid(),
                          text: "Subtask 2",
                          complete: Math.floor(Math.random() * 101) // 0 to 100
                      },
                      {
                          start: "2014-10-01",
                          id: DayPilot.guid(),
                          text: "Milestone 1",
                          type: "Milestone"
                      }

                  ]
              }
          ],
          onTaskClicked: function(args) {
              alert("Clicked: " + args.e.id());
          }
      });
  });
  
</script>