scheduler-percent-complete.png

You can use the duration bar as a "percent complete" indicator.

  1. Make sure the duration bar is enabled (DurationBarVisible property)
  2. Set the duration bar mode to PercentComplete (DurationBarMode property)
  3. Set the percentage in BeforeEventRender event handler (e.Complete property)

Make sure that the duration bar style is included in the theme.

Example from scheduler_green theme:

.scheduler_green_event_bar
{
  top: 3px;
  left: 4px;
  right: 4px;
  height: 2px;
  background-color: #C7D48D;
}

.scheduler_green_event_bar_inner  
{
  position: absolute;
  height: 2px;
  background-color: #6E8700;
}

See also:

ASP.NET WebForms

.aspx

<DayPilot:DayPilotScheduler runat="server" id="DayPilotScheduler1"
  ...
  DurationBarVisible = "true",
  DurationBarMode = "PercentComplete"
/>

.aspx.cs

protected void DayPilotScheduler1_BeforeEventRender(object sender, BeforeEventRenderEventArgs e)
{
  int complete = (int) e.DataItem["complete"];  // assumes you have "complete" property in the data source item
  e.PercentComplete = complete;

  string cs = String.Format("{0}%", complete);
  e.Html = cs;
}

Demo

ASP.NET MVC

scheduler-asp.net-mvc-task-percent-complete.png

View

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  BackendUrl = ResolveUrl("~/Scheduler/Backend"),
  ...
  DurationBarVisible = true,
  DurationBarMode = DurationBarMode.PercentComplete,
})

Backend Controller

protected override void OnBeforeEventRender(BeforeEventRenderArgs e)
{
  int complete = (int) e.DataItem["complete"];  // assumes you have "complete" property in the data source item
  e.PercentComplete = complete;

  string cs = String.Format("{0}%", complete);
  e.Html = cs;
}

Demo

JavaScript

<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Scheduler("dp");
  dp.durationBarVisible = true;
  dp.durationBarMode = "PercentComplete";
  dp.events.list = [
    {
      start: "2013-03-25T00:00:00",
      end: "2013-03-25T12:00:00",
      id: "123",
      resource: "A",
      text: "Event",
      complete: 50
    }
  ]
  // ...
  dp.init();
</script>