By default, the event boxes are aligned with the cell size. The real event length is indicated using a duration bar.

Example:

  • Default cell duration is 30 minutes (cellDuration = 30).
  • Event with duration from 10:15 to 10:45 will be rendered in a box with size 10:00-11:00.

If you want to show events in real length, you can use useEventBoxes property. It has three possible values:

  • "Always" (default)
  • "Never"
  • "ShortEventsOnly"

UseEventBoxes="Always"

02 useboxes

UseEventBoxes="ShortEventsOnly"

03 noboxes

JavaScript

<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Calendar("dp");
  dp.useEventBoxes = "Never";
  // ...
  dp.init();
</script>

ASP.NET WebForms

 
<DayPilot:DayPilotCalendar runat="server" id="DayPilotCalendar1"
  ...
  UseEventBoxes = "Never"
/>

ASP.NET MVC

 
@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig {
  BackendUrl = ResolveUrl("~/Calendar/Backend"),
  ...
  UseEventBoxes = UseEventBoxesType.Never
})