JQuery Event calendar Custom Event Sort Order Example

When rendering events, the default logic determines the order:

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 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 event display order in a event calendar — assign per-event priority values or supply a custom function to override the default ordering.

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

var now = new Date();
var day = now.getDay();
var monday = now.getDate() - day + (day == 0 ? -6 : 1);

$(function () {
  $('#demo-custom-event-sort')
    .mobiscroll()
    .eventcalendar({
      clickToCreate:  ,
      dragToCreate:  ,
      dragToMove:  ,
      dragToResize:  ,
      eventDelete:  ,
      view: {
        calendar: {
          type: 'week',
        },
      },
      data: [
        {
          start: new Date(now.getFullYear(), now.getMonth(), monday),
          title: 'Kate OFF (PROPOSED)',
          color: '#e7b300',
          allDay: true,
          accepted: false,
          order: 1,
        },
        {
          start: new Date(now.getFullYear(), now.getMonth(), monday),
          title: 'John OFF (APPROVED)',
          color: '#00ca10',
          allDay: true,
          accepted: true,
          order: 2,
        },
        {
          start: new Date(now.getFullYear(), now.getMonth(), monday),
          title: 'Mark OFF (PROPOSED)',
          color: '#e7b300',
          allDay: true,
          accepted: false,
          order: 1,
        },
        {
          start: new Date(now.getFullYear(), now.getMonth(), monday),
          title: 'Emma OFF (PROPOSED)',
          color: '#e7b300',
          allDay: true,
          accepted: false,
          order: 1,
        },
        {
          start: new Date(now.getFullYear(), now.getMonth(), monday + 1),
          title: 'Mark OFF (APPROVED)',
          color: '#00ca10',
          allDay: true,
          accepted: true,
          order: 2,
        },
        {
          start: new Date(now.getFullYear(), now.getMonth(), monday + 1),
          title: 'Carol OFF (PROPOSED)',
          color: '#e7b300',
          allDay: true,
          accepted: false,
          order: 1,
        },
        {
          start: new Date(now.getFullYear(), now.getMonth(), monday + 2),
          title: 'Luke OFF (PROPOSED)',
          color: '#e7b300',
          allDay: true,
          accepted: false,
          order: 1,
        },
        {
          start: new Date(now.getFullYear(), now.getMonth(), monday + 2),
          title: 'Carol OFF (APPROVED)',
          color: '#00ca10',
          allDay: true,
          accepted: true,
          order: 2,
        },
        {
          start: new Date(now.getFullYear(), now.getMonth(), monday + 2),
          title: 'Kate OFF (APPROVED)',
          color: '#00ca10',
          allDay: true,
          accepted: true,
          order: 2,
        },
        {
          start: new Date(now.getFullYear(), now.getMonth(), monday + 2),
          title: 'Dean OFF (PROPOSED)',
          color: '#e7b300',
          allDay: true,
          accepted: false,
          order: 1,
        },
        {
          start: new Date(now.getFullYear(), now.getMonth(), monday + 2),
          title: 'Emma OFF (APPROVED)',
          color: '#00ca10',
          allDay: true,
          accepted: true,
          order: 2,
        },
        {
          start: new Date(now.getFullYear(), now.getMonth(), monday + 2),
          title: 'Jason OFF (APPROVED)',
          color: '#00ca10',
          allDay: true,
          accepted: true,
          order: 2,
        },
        {
          start: new Date(now.getFullYear(), now.getMonth(), monday + 3),
          title: 'Jason OFF (APPROVED)',
          color: '#00ca10',
          allDay: true,
          accepted: true,
          order: 2,
        },
        {
          start: new Date(now.getFullYear(), now.getMonth(), monday + 4),
          title: 'Ryan OFF (PROPOSED)',
          color: '#e7b300',
          allDay: true,
          accepted: false,
          order: 1,
        },
        {
          start: new Date(now.getFullYear(), now.getMonth(), monday + 4),
          title: 'John OFF (APPROVED)',
          color: '#00ca10',
          allDay: true,
          accepted: true,
          order: 2,
        },
        {
          start: new Date(now.getFullYear(), now.getMonth(), monday + 4),
          title: 'Dean OFF (PROPOSED)',
          color: '#e7b300',
          allDay: true,
          accepted: false,
          order: 1,
        },
      ],
    });
});

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

Custom Event Sort Order

Duplicate Session

Duplicate Session

Demo

Code

Duplicate Session

Duplicate Session