DayPilot.Scheduler.useEventBoxes

The useEventBoxes property (string) sets the event box alignment mode used by the JavaScript Scheduler component (see Exact Event Duration).

Declaration

DayPilot.Scheduler.useEventBoxes

Possible Values

• "Always" - events are wrapped in a box that is aligned with the grid.

• "ShortEventsOnly" - event boxes are used for events shorter than one cell. Pro only.

• "Never" - events are rendered at their exact start and end position.

Default Value

"Always"

Notes

If event boxes are used, event start and end positions are aligned with cells (time slots). The real event length is then indicated by the duration bar.

If you want to control event alignment with the grid during drag and drop, see DayPilot.Scheduler.snapToGrid.

Examples

JavaScript

const dp = new DayPilot.Scheduler("dp", {
  useEventBoxes: "ShortEventsOnly",
  // ...
});
dp.init();

Angular

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

config: DayPilot.SchedulerConfig = {
  useEventBoxes: "ShortEventsOnly",
  // ...
};

React

<DayPilotScheduler
  useEventBoxes="ShortEventsOnly"
  {/* ... */}
/>

Vue

<DayPilotScheduler
  useEventBoxes="ShortEventsOnly"
  <!-- ... -->
/>

See Also

DayPilot.Scheduler.snapToGrid

Exact Event Duration [doc.daypilot.org]

Duration Bar [doc.daypilot.org]

DayPilot.Scheduler Class