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

javascript calendar concurrent events cascade

SideBySide

javascript calendar concurrent events side by side

Full

javascript calendar concurrent events full

JavaScript

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

<script>
  const calendar = new DayPilot.Calendar("calendar", {
    eventArrangement: "SideBySide",
    // ...
  });
  calendar.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,
  // ...
	
})