event-calendar-duration-bar-cssonly-mode.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:

/* inner event box */
.calendar_green_event_inner  
{
  overflow: hidden;
  position: absolute;
  top: 0px;
  bottom: 2px;
  left: 2px;
  right: 0px;
  margin-right: 1px;
  font-size: 12px;
  padding: 2px;
  padding-left: 8px; /* make space for duration bar */
  
  color: #ffffff;
  background: #a2c200;
  background: -moz-linear-gradient(
    top,
    #a2c200 0%,
    #8aaa00);
  background: -webkit-gradient(
    linear, left top, left bottom, 
    from(#a2c200),
    to(#8aaa00));  
  filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#a2c200", endColorStr="#8aaa00");
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #7cb316;
  -moz-box-shadow:
    0px 2px 3px rgba(000,000,000,0.3),
    inset 0px 0px 2px rgba(255,255,255,0.8);
  -webkit-box-shadow:
    0px 2px 3px rgba(000,000,000,0.3),
    inset 0px 0px 2px rgba(255,255,255,0.8);
  box-shadow:
    0px 2px 3px rgba(000,000,000,0.3),
    inset 0px 0px 2px rgba(255,255,255,0.8);
  text-shadow:
    0px -1px 0px rgba(000,000,000,0.2),
    0px 1px 0px rgba(255,255,255,1);
}


/* outer duration bar box */
.calendar_green_event_bar
{
  top: 3px;
  bottom: 4px;
  left: 6px;
  width: 2px;
  background-color: #C0D46A;
  background-color: #C7D48D;
}


/* duration bar */
.calendar_green_event_bar_inner  
{
  position: absolute;
  width: 2px;
  background-color: #6E8700;
}

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.

JavaScript

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

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