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,
}
]
});
});
If you're using 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.
However, 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.