Exact Event Duration

By default, event boxes are aligned with the JavaScript Calendar grid cells, and the actual event duration is indicated by a duration bar.

Example

• The default cell duration is 30 minutes (cellDuration = 30).

• An event that runs from 10:15 to 10:45 is rendered in a box spanning 10:00 – 11:00.

If you want to display events at their true length, use the useEventBoxes property, which accepts three values:

• "Always" (default)

• "Never"

• "ShortEventsOnly" (Pro only)

When you disable event boxes, you can also turn off the Snap to Grid feature for drag‑and‑drop operations.

useEventBoxes="Always"

useEventBoxes="Never"

Live Demo

• JavaScript Calendar: Exact Event Duration (Demo)

JavaScript

<div id="calendar"></div>
<script>
  const calendar = new DayPilot.Calendar("calendar", {
    useEventBoxes: "Never",
    // ...
  });
  calendar.init();
</script>

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

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