Javascript Scheduler Custom Event Order Example

The rendering engine uses the following two concepts to determine how the events are rendered:

Event data order
Event layout

The data order is determined by the following logic:

All-day events are placed at the top
Non-all-day events follow, sorted by their start times
Events with the same start time are ordered alphabetically by their title

The event layout process determines the visual positioning and dimensions of events. This is a built-in functionality and cannot be altered externally. The layout algorithm processes the sorted event list and calculates each event's position and size. The algorithm follows these steps:

The first event is placed in the first position of the event column
If two or more events overlap in their start/end times, the later event is placed in the next event column, positioned after to the previous event
If a subsequent event does not overlap with any already added events, it is placed back in the first event column
This process continues until all events are positioned within their respective columns

The order property of the event data can be used to override the default ordering. The order property takes precedence over the default rules. If two events have the same order value, the default rules apply. For a more advanced order logic, the eventOrder option can be used which expects a function that compares two events and returns an order (-1 or 1).

Do you want to learn about the event ordering? Learn more about it in the documentation →

Download and try example

Preview in full screen

Control the event display order in a Scheduler — set per-event priorities or a custom sort function to override the default ordering rules.

mobiscroll.setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
});

mobiscroll.eventcalendar('#demo-custom-event-sort', {
  clickToCreate:  ,
  dragToCreate:  ,
  dragToMove:  ,
  dragToResize:  ,
  eventDelete:  ,
  view: {
    scheduler: {
      type: 'week',
    },
  },
  data: [
    {
      id: 1,
      start: '2026-10-24T02:00',
      end: '2026-10-24T20:00',
      title: 'Event 1 - order 2',
      order: 2,
      color: '#e7b300',
    },
    {
      id: 2,
      start: '2026-10-24T07:00',
      end: '2026-10-24T19:00',
      title: 'Event 2 - order 4',
      order: 4,
      color: '#eb4034',
    },
    {
      id: 3,
      start: '2026-10-24T10:00',
      end: '2026-10-24T16:00',
      title: 'Event 3 - order 3',
      order: 2,
      color: '#00ca10',
    },
    {
      id: 4,
      start: '2026-10-24T12:00',
      end: '2026-10-24T15:00',
      title: 'Event 4 - order 1',
      order: 1,
      color: '#f5850c',
    },
    {
      id: 5,
      start: '2026-10-25T08:00',
      end: '2026-10-25T11:00',
      title: 'Event 6 - order 1',
      order: 1,
      color: '#f5850c',
    },
    {
      id: 6,
      start: '2026-10-25T11:00',
      end: '2026-10-25T15:00',
      title: 'Event 7 - order 3',
      order: 3,
      color: '#00ca10',
    },
    {
      id: 7,
      start: '2026-10-25T11:00',
      end: '2026-10-25T15:00',
      title: 'Event 8 - order 2',
      order: 2,
      color: '#e7b300',
    },
    {
      id: 8,
      start: '2026-10-25T15:00',
      end: '2026-10-25T20:00',
      title: 'Event 9 - order 2',
      order: 2,
      color: '#e7b300',
    },
    {
      id: 9,
      start: '2026-10-25T15:00',
      end: '2026-10-25T19:00',
      title: 'Event 10 - order 1',
      order: 1,
      color: '#f5850c',
    },
    {
      id: 10,
      start: '2026-10-23T02:00',
      end: '2026-10-23T14:00',
      title: 'event 11 - order 1',
      order: 1,
      color: '#f5850c',
    },
    {
      id: 11,
      start: '2026-10-23T04:00',
      end: '2026-10-23T10:00',
      title: 'Event 12 - order 2',
      order: 2,
      color: '#e7b300',
    },
    {
      id: 12,
      start: '2026-10-23T06:00',
      end: '2026-10-23T12:00',
      title: 'Event 13 - order 2',
      order: 2,
      color: '#e7b300',
    },
  ],
});

<div id="demo-custom-event-sort"></div>

Custom Event Order

Duplicate Session

Duplicate Session

Demo

Code

Duplicate Session

Duplicate Session