gantt-chart-default-css-theme.png

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

gantt-chart-asp.net-drag-and-drop.png

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

Percent Complete

gantt-chart-asp.net-percent-complete.png

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.png

White Theme

gantt-chart-asp.net-theme-white.png

Transparent Theme

gantt-chart-asp.net-theme-transparent.png

CSS Theme Designer

gantt-chart-asp.net-theme-designer.png

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

Task Details

gantt-chart-asp.net-task-detail.png

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.png

Event context menu example

gantt-chart-asp.net-area-context-menu.png

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.png

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

JavaScript

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

Demo