Javascript Agenda Custom Event Sort 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 the display order of events in a agenda view — set per-event priority or use a custom sort function.

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

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

mobiscroll.eventcalendar('#demo-custom-event-sort', {
  view: {
    agenda: { 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,
    },
  ],
});