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>

API: durationBarMode.

The examples supply complete: 60 directly in the event data and select PercentComplete mode. The value is a percentage from 0 to 100, so 60 represents 60%.

The framework examples use DayPilot Pro. For installation, see the Angular, React or Vue Scheduler guide.

Angular

import {Component} from "@angular/core";
import {DayPilot, DayPilotModule} from "daypilot-pro-angular";

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    
    <daypilot-scheduler [config]="config"></daypilot-scheduler>
  `
})
export class SchedulerExampleComponent {
  config: DayPilot.SchedulerConfig = {
    startDate: "2026-11-01",
    days: 30,
    scale: "Day",
    timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}],
    resources: [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}],
    events: [{id: 1, text: "Implementation (60%)", resource: "A", start: "2026-11-03", end: "2026-11-10", complete: 60}],
    durationBarMode: "PercentComplete"
  };

}

React

import React from "react";
import {DayPilot, DayPilotScheduler} from "daypilot-pro-react";

export default function SchedulerExample() {

  return <div>

    <DayPilotScheduler
      startDate={"2026-11-01"}
      days={30}
      scale={"Day"}
      timeHeaders={[{groupBy: "Month"}, {groupBy: "Day", format: "d"}]}
      resources={[{id: "A", name: "Room A"}, {id: "B", name: "Room B"}]}
      events={[{id: 1, text: "Implementation (60%)", resource: "A", start: "2026-11-03", end: "2026-11-10", complete: 60}]}
      durationBarMode={"PercentComplete"}
    />
  </div>;
}

Vue

<script setup>
import {DayPilot, DayPilotScheduler} from "daypilot-pro-vue";

const startDate = "2026-11-01";
const days = 30;
const scale = "Day";
const timeHeaders = [{groupBy: "Month"}, {groupBy: "Day", format: "d"}];
const resources = [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}];
const events = [{id: 1, text: "Implementation (60%)", resource: "A", start: "2026-11-03", end: "2026-11-10", complete: 60}];
const durationBarMode = "PercentComplete";

</script>

<template>
  <div>

    <DayPilotScheduler
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
      :durationBarMode="durationBarMode"
    />
  </div>
</template>

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

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;
}

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

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;
}