html5-javascript-event-calendar-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.

By default, the duration bar is enabled (DurationBarVisible property). The real event duration will be displayed using a duration bar at the left side of the event box.

Appearance

The duration bar appearance is defined in the CSS theme.

Example:

/* outer duration bar box, uses full height, light blue */
.calendar_default_event_bar { top: 0px; bottom: 0px; left: 0px; width: 4px; background-color: #9dc8e8; }

/* inner duration bar box, displays the duration, dark blue */
.calendar_default_event_bar_inner { position: absolute; width: 4px; background-color: #1066a8; }

JavaScript

Example - disabling the duration bar

<div id="dp"></div>

<script type="text/javascript">
  var dp = new DayPilot.Calendar("dp");
  dp.durationBarVisible = false;
  // ...
  dp.init();
</script>

ASP.NET WebForms

DurationBarVisible="true"

Disabling the duration bar

<DayPilot:DayPilotCalendar runat="server"
DurationBarVisible="false"
...
/>

Custom width (!CssOnly)

duration-bar-width.png

<DayPilot:DayPilotCalendar runat="server"
DurationBarWidth="10"
...
/>

This property is ignored in the CssOnly mode.

Custom color (!CssOnly)

<DayPilot:DayPilotCalendar runat="server"
DurationBarColor="Red"
...
/>

This property is ignored in the CssOnly mode.

Custom image (!CssOnly)

tentative.png

<DayPilot:DayPilotCalendar runat="server"
DurationBarImageUrl="tentative.png"
...
/>

This property is ignored in the CssOnly mode.

Custom color - per event (!CssOnly)

protected void DayPilotCalendar1_BeforeEventRender(object sender, BeforeEventRenderEventArgs e)
{
  if (e.Tag[0] == "2")
  {
    e.DurationBarColor = "red";
  }
}

This property is ignored in the CssOnly mode.

Custom image - per event (!CssOnly)

tentative.png

protected void DayPilotCalendar1_BeforeEventRender(object sender, BeforeEventRenderEventArgs e)
{
  if (e.Tag["status"] == "tentative")
  {
    e.DurationBarImageUrl = "tentative.png";
  }
}

This property is ignored in the CssOnly mode.

ASP.NET MVC

Hiding the Duration Bar

You can hide it using DurationBarVisible property:

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig { 
    
	// ...
	DurationBarVisible = false,
	// ...

})

You can set individual duration bar colors to events using OnBeforeEventRender.

Duration Bar Color (!CssOnly)

You can set the duration bar color using DurationBarColor property:

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig { 
    
	// ...
	DurationBarColor = "red",
	// ...

})

This property is ignored in the CssOnly mode.

Duration Bar Image (!CssOnly)

You can set the duration bar image using DurationBarImageUrl property:

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig { 
    
	// ...
	DurationBarImageUrl = ResolveUrl("~/Media/linked/tentative5x8.gif"), 
	// ...

})

This property is ignored in the CssOnly mode.

Duration Bar Width (!CssOnly)

You can set the duration bar image using DurationBarWidth property:

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig { 
    
	// ...
	DurationBarWidth = 10, 
	// ...

})

This property is ignored in the CssOnly mode.