Duration Bar

The JavaScript Scheduler component displays a duration bar at the top of events.

The default mode is to show the real event duration:

• With the default useEventBoxes setting ("Always"), the event boxes are aligned with the Scheduler grid cells.

• The dark part of the duration bar shows the real start and end within a cell.

You can also set a different color of the duration bar for each event, depending on their status or type.

You can change the duration bar to a progress bar. In this case the dark part of the duration bar displays progress defined as a percentage value.

The duration bar can be turned off.

You can hide the default duration and create a bar with custom logic/appearance using event active areas.

Hiding the Duration Bar

The duration bar (progress bar in PercentComplete mode) is enabled by default. You can disable it using DurationBarVisible property.

You can also disable it for certain events using BeforeEventRender event handler.

JavaScript Example

You can hide the duration/progress bar for selected events directly in the data source by adding .barHidden = true to event properties. See also DayPilot.Event.data.

dp.events.list = [
  {
    id: "1"
    start: "2023-01-01T09:00:00",
    end: "2023-01-01T13:00:00",
    text: "Event 1",
    resource: "B",
    barHidden: true
  }
];

Appearance

The duration bar appearance is defined in the CSS theme.

You can modify the CSS to display the duration bar at a different position inside an event (e.g. at the bottom), use custom height, add margins, and set the background color.

Example:

/* outer box, full width */
.scheduler_green_event_bar
{
	top: 3px;
	left: 4px;
	right: 4px;
	height: 2px;
	background-color: #C7D48D;
}


/* inner box, with varying start and width */
.scheduler_green_event_bar_inner  
{
	position: absolute;
	height: 2px;
	background-color: #6E8700;
}

Progress Bar Mode

You switch the duration bar mode to display completed percentage of the task.

Custom Duration Bar Color

The duration bar color can be set for each event individually using BeforeEventRender event handler.

Tutorials

See also How to Add Custom Progress Bar to React Scheduler Events for an example that adds a custom percentage progress bar to the bottom of Scheduler events (in addition to the standard duration bar).