Available modes:

  • SideBySide
  • Cascade
  • Full

You can change the event arrangement mode using EventArrangement property.

SideBySide

javascript-calendar-concurrent-events-side-by-side.png

Cascade

javascript-calendar-concurrent-events-cascade.png

Full

javascript-calendar-concurrent-events-full.png

JavaScript

<div id="dp"></div>

<script type="text/javascript">
  var dp = new DayPilot.Calendar("dp");
  dp.eventArrangement = "Cascade";
  // ...
  dp.init();
</script>

ASP.NET WebForms

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

ASP.NET MVC

MVC View

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

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