Event Arrangement Mode

The JavaScript Calendar component offers several modes of arranging concurrent events:

• Cascade

• SideBySide

• Full

The default mode is “Cascade” where the events partially overlap.

You can change the event arrangement mode using the eventArrangement property.

Cascade

SideBySide

Full

JavaScript

<div id="calendar"></div>

<script>
  const calendar = new DayPilot.Calendar("calendar", {
    eventArrangement: "SideBySide",
    // ...
  });
  calendar.init();
</script>

<DayPilot:DayPilotCalendar runat="server" ID="DayPilotCalendar1"
  EventArrangement="Cascade"
  ...
/>

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig { 

  // ...
  EventArrangement = ArrangementType.Cascade,
  // ...
	
})