javascript gantt chart view

DayPilot Scheduler can display a Gantt Chart by simply switching the ViewType property to "Gantt".

Note: Since DayPilot Pro 7.9 this ViewType is superseded by a special Gantt Chart component.

How It Works

In the Gantt mode, the Scheduler will generate the rows automatically from the event set:

  • Each event/task will be displayed on a separate row.

  • You can customize the task box using BeforeEventRender event (HTML, CSS class, context menu, action restrictions, active hover areas, etc.)

  • You can customize the row header using BeforeResHeaderRender event (HTML, CSS class, active hover areas)

  • Tasks can be moved and resized using drag and drop

Drag and Drop

gantt chart drag and drop

The tasks can be  moved and resized right in place using drag and drop.

Percent Complete

gantt chart percent complete

In order to use the duration bar to display task progress (as percentage), use DurationBarMode="PercentComplete" and set the value in BeforeEventRender event.

Full CSS Styling

All elements can be styled using pure CSS.

CSS Themes

Examples of available themes:

Green Theme

gantt chart theme green

White Theme

gantt chart theme white

Transparent Theme

gantt chart theme transparent

CSS Theme Designer

gantt chart theme designer

Create your own CSS theme in the online theme designer application.

Task Details

gantt chart task detail

One of the ways to display the event details is task bubble - an extended HTML tooltip that is displayed on hover.

Active Areas

You can define custom active areas inside the task box that will be permanently visible or that will be displayed on hover

An active area can have an action associated to it:

  • context menu

  • drag handler for moving

  • drag handler for resizing

  • custom JavaScript action

Event delete icon example

gantt chart area delete

Event context menu example

gantt chart area context menu


<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Scheduler("dp");
  dp.viewType = "Gantt";
  // ...


ASP.NET WebForms




For a sample ASP.NET web project that demonstrates how to display a Gantt chart using an SQL database, see the Gantt Chart Tutorial []. The download includes both C# and VB.NET versions.




protected void DayPilotScheduler1_BeforeEventRender(object sender, BeforeEventRenderEventArgs e)
  int complete = (int) e.DataItem["complete"]; // use "complete" field of your DataSource items  
  e.PercentComplete = complete;  

  string cs = String.Format("{0}%", complete);  // override the task text
  e.InnerHTML = cs;

Export as Image (PNG, GIF, JPG)

gantt chart png export

The Gantt chart can be exported as image.

  • Formats: PNG, JPG, GIF, BMP, TIFF (MemoryStream class)

  • Raw Bitmap class (you can further modify the image or merge it with other images)

  • Add images to PDF files, e-mails, or display static snapshots of the gantt chart

Active Areas

protected void DayPilotScheduler1_BeforeEventRender(object sender, BeforeEventRenderEventArgs e)
    e.Areas.Add(new Area().Width(17).Bottom(9).Right(19).Top(3).CssClass("event_action_delete").JavaScript("dps1.commandCallBack('delete', {id:e.value() });"));
    e.Areas.Add(new Area().Width(17).Bottom(9).Right(2).Top(3).CssClass("event_action_menu").ContextMenu("cmSpecial"));


@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  BackendUrl = ResolveUrl("~/Scheduler/Backend"),
  ViewType = DayPilot.Web.Mvc.Enums.Scheduler.ViewType.Gantt