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 asp.net drag and drop

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

Percent Complete

gantt chart asp.net 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 asp.net theme green

White Theme

gantt chart asp.net theme white

Transparent Theme

gantt chart asp.net theme transparent

CSS Theme Designer

gantt chart asp.net theme designer

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

Task Details

gantt chart asp.net 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 asp.net area delete

Event context menu example

gantt chart asp.net area context menu

JavaScript

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

Demo

ASP.NET WebForms

 
<DayPilot:DayPilotScheduler
  ID="DayPilotScheduler1" 
  runat="server" 

  DataEndField="TaskEnd"
  DataStartField="TaskStart" 
  DataTextField="TaskName" 
  DataValueField="TaskId" 

  ViewType="Gantt"
/>

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

Demo

Tutorial

Example

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 asp.net 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"));
}

ASP.NET MVC

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

Tutorial

Demo