DayPilot.Calendar.eventArrangement

The eventArrangement property (string) sets the arrangement mode for overlapping JavaScript Calendar events.

Declaration

DayPilot.Calendar.eventArrangement

Possible Values

• "SideBySide" - displays overlapping events next to each other using the available width.

• "Cascade" - displays overlapping events in a staggered cascade.

• "Full" - lets each event use the full column width even when events overlap.

Default Value

"Cascade"

Examples

JavaScript

const calendar = new DayPilot.Calendar("dp", {
  eventArrangement: "Full",
  // ...
});
calendar.init();

Angular

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

config: DayPilot.CalendarConfig = {
  eventArrangement: "Full",
  // ...
};

React

<DayPilotCalendar
  eventArrangement="Full"
  {/* ... */}
/>

Vue

<DayPilotCalendar
  eventArrangement="Full"
  <!-- ... -->
/>

See Also

• Event Arrangement Mode [doc.daypilot.org]

• DayPilot.Calendar Class