fullcalendar reverse date sorting - latest day to be shown first

Question

Anyone know how to sort the fullcalendar so latest dates i shown first

Below image show the dates en ascending order, but how to show in descending

The code i have tried with is as follows:

$(document).ready(function() {

$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,listMonth'
},
defaultDate: '2017-10-01',
defaultView: 'listMonth',
editable: true,
      eventOrder : (x,y) => x.start > y.start? 1 : -1,
      eventOrderStrict: true,
events: [
        {
title: 'Delta',
start: '2017-10-11T10:30:00',
          end: '2017-10-12T12:30:00',
          displayOrder: 2,
},
{
title: 'Alpha',
start: '2017-10-13T11:30:00',
          end: '2017-10-12T12:30:00',
          displayOrder: 3,
},
        {
title: 'Bravo',
start: '2017-10-12T12:30:00',
end: '2017-10-12T12:30:00',
          displayOrder: 1,
},
        {
title: 'Charlie',
start: '2017-10-12T09:30:00',
          end: '2017-10-12T12:30:00',
          displayOrder: 4,
}
]
});

});

Answer 1

Unfortunately this is not possible in fullCalendar 3.

the eventOrder documentation for v3 says:

...events often have the same exact start time and duration, which is especially true for all-day events. By default, when this happens, events are sorted alphabetically by title. eventOrder provides the ability to override this behavior.

This means that in v3, the eventOrder custom settings aren't considered at all unless there are two events with the exact same start time and duration. Therefore, you cannot re-order the events based on start time. This demo shows it - you can see (by the lack of console logs) that the callback function is never triggered: https://codepen.io/ADyson82/pen/GRQVaja.

---

If you upgrade to fullCalendar 4 or above, you can simply use -start in the eventOrder setting, to indicate that it should be sorted in reverse by the start time.

We know this because the eventOrder documentation says it:

If prefixed with a minus sign like "-title", sorting will happen in descending order

For example (this also preserves the other default sort options to be used when the times are equal):

eventOrder: "-start,-duration,allDay,title"

Thus you don't need a custom callback.

Demo: https://codepen.io/ADyson82/pen/OJQKJVm

Note that this will have no effect in time-aware views such as timeGrid or timeLine, because the display is controlled by the placement of the time on the predefined grid (and you cannot reverse the grid order).

Also note that the eventOrderStrict option doesn't exist in fullCalendar 4, it was only introduced in v5. Make sure you always read the correct version of the documentation.

The V4 Release Notes and Upgrade Guide document gives you a good guide to what you need to change in order to transition from v3 to v4. The move from v4 to v5 is also documented in a similar way, but the change is not as big.

---

P.S. In terms of user experience as a result of this, I'd caution that it's a calendar, and so it's intended to be chronological. Showing the dates in a different order makes little or no sense in that context, and people may be confused by it - especially in the non-list views.