html5-scheduler-event-duration-bar.png

With the default UseEventBoxes setting ("Always") event boxes are aligned with the cells. For CellDuration=30 an event with duration of 1 minute will fill the 30 minute cell.

You can display the real event duration using a duration bar at the top of the event box.

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: "2016-01-01T09:00:00",
    end: "2016-01-01T13:00:00",
    text: "Event 1",
    resource: "B",
    barHidden: true
  }
];

Appearance

The duration bar appearance is defined in the CSS theme.

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

Percent Complete Mode

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

Custom Duration Bar Color

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