DayPilot.Calendar.useEventBoxes

The useEventBoxes property (string) sets how the JavaScript Calendar component aligns event boxes with grid cells.

Declaration

DayPilot.Calendar.useEventBoxes

Possible Values

• "Always" - aligns all event boxes with the grid cells.

• "Never" - displays event boxes using the exact event start and end positions.

• "ShortEventsOnly" - aligns only events shorter than DayPilot.Calendar.cellDuration with the grid cells. (DayPilot Pro only)

Default Value

"Always"

Notes

With the default "Always" mode, short events fill the whole grid cell even when their real duration is shorter.

When you switch to "Never", consider disabling snap-to-grid to keep drag-and-drop behavior consistent with the rendered event boxes.

Examples

JavaScript

const calendar = new DayPilot.Calendar("calendar", {
  useEventBoxes: "Never",
  // ...
});
calendar.init();

Angular

<daypilot-calendar [config]="config"></daypilot-calendar>

config: DayPilot.CalendarConfig = {
  useEventBoxes: "Never",
  // ...
};

React

<DayPilotCalendar
  useEventBoxes="Never"
  {/* ... */}
/>

Vue

<DayPilotCalendar
  :useEventBoxes="'Never'"
  <!-- ... -->
/>

See Also

DayPilot.Calendar.cellDuration

Exact Event Duration [doc.daypilot.org]

DayPilot.Calendar Class