scheduler percent complete

You can use the duration bar as a progress bar or "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 onBeforeEventRender event handler (args.data.complete property)

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>

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

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