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.png

UseEventBoxes="ShortEventsOnly"

03-noboxes.png

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

JavaScript

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