By default, the JavaScript Calendar component displays events with a color bar on the left side, serving two main purposes:
-
It displays the actual event start and end times when event boxes are enabled. With the default useEventBoxes setting set to "Always", event boxes align with the calendar grid cells. For instance, with a cellDuration value of 30, an event lasting 1 minute will fill the entire 30-minute cell. By default, the duration bar is enabled (controlled by the durationBarVisible property). This bar shows the real event duration at the left side of the event box.
-
It allows the customization of the duration bar color. Use custom colors to highlight specific events or to display different event types or statuses. See also event customization.
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 calendar = new DayPilot.Calendar("dp", {
durationBarVisible: false,
// ...
});
calendar.init();
</script>
ASP.NET WebForms
DurationBarVisible="true"
Disabling the duration bar
<DayPilot:DayPilotCalendar runat="server"
DurationBarVisible="false"
...
/>Custom width (!CssOnly)
<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)
<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)
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.