Event Sorting

The Scheduler component supports custom sorting of events within each resource row. By default, it places events by start time (ascending), then end time (descending):

start asc, end desc

Sorting determines placement order. For an explicitly assigned line, see Exact Event Position.

JavaScript

The JavaScript Scheduler reads custom sort values from the sort array of each event data object. Set sortDirections to specify "asc" or "desc" for each array position. Values can be numbers or strings. For example, sortDirections: ["asc", "desc"] with sort: [1, "Planning"] sorts by the number first, then by the text in descending order.

Custom Priority and Compact Placement

This example places lower numeric priority values first. After sorting, the Scheduler puts each event on the first line where it fits:

<div id="dp"></div>
<script>
const dp = new DayPilot.Scheduler("dp", {
  startDate: "2026-09-01",
  days: 1,
  scale: "Hour",
  sortDirections: ["asc"],
  resources: [{id: "R", name: "Resource"}],
  events: [
    {
      id: 1,
      text: "Short high priority",
      resource: "R",
      start: "2026-09-01T09:00:00",
      end: "2026-09-01T10:00:00",
      sort: [1]
    },
    {
      id: 2,
      text: "Long high priority",
      resource: "R",
      start: "2026-09-01T09:00:00",
      end: "2026-09-01T12:00:00",
      sort: [1]
    },
    {
      id: 3,
      text: "Low priority",
      resource: "R",
      start: "2026-09-01T11:00:00",
      end: "2026-09-01T12:00:00",
      sort: [7]
    }
  ]
});
dp.init();
</script>

The two high-priority events overlap, so they occupy separate lines. At 11:00, the first line is free and the low-priority event fits there. It can therefore appear above the long high-priority event even though it was placed later.

Keep Overlapping Events in Priority Order

Enable eventSortStrictEnabled when overlapping events must retain their vertical priority order:

dp.update({eventSortStrictEnabled: true});

In the same example, the low-priority event moves to a third line, below the long high-priority event. Equal-priority events still use compact placement, and events that do not overlap can reuse lines. Strict sorting does not reserve a separate full-width band for every priority.

This DayPilot Pro option is available since 2026.3.7044 and defaults to false. It requires custom sortDirections and cannot be combined with groupConcurrentEvents. Explicit event lines remain authoritative; rowReverseLines reverses the visual line direction.

When using event containers, the first member in the sorted order determines the container's outer placement priority. Strict ordering also applies inside a multiline container.

Tutorial

• JavaScript Scheduler: Event Placement Strategies

EventSortExpression="priority asc, name desc"

EventSortExpression = "priority asc, name desc";