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 control. See also the AngularJS Gantt Chart plugin.

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

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

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

White Theme

Transparent Theme

CSS Theme Designer

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

Task Details

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

Event context menu example

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)

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




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