FullCalendar: show reversed list views

Question

How can I reverse the events in the list views, so that the event with the most futuristic date appears at the beginning (top)?

Answer 1

@F.Mora your solution is almost perfect but in our case we add some custom classNames and have multiple items under each headline.

Here is our enhanced version :

eventAfterAllRender: function(view) {
    var renderedEvents = $('.fc-list-table  tr');
    var reorderedEvents = [];
    var blockEvents = null;
    renderedEvents.map(function(key, event) {
        if ($(event).hasClass('fc-list-heading')) {
            if (blockEvents) {
                reorderedEvents.unshift(blockEvents.children());   
            }
            blockEvents = $('<tbody></tbody>');
        }
        blockEvents.append(event);
    });
    reorderedEvents.unshift(blockEvents.children());
    $('.fc-list-table tbody').html(reorderedEvents);
}

Answer 2

Here's the version I use (fullCalendar v4):

datesRender: function(info) {
    var list = $(info.el).find('.fc-list-table tbody');
    list.find('.fc-list-heading').each((i,heading) => {
      var children = $(heading).nextUntil('.fc-list-heading')
      list.prepend(children)
      list.prepend(heading)
    })
},

Answer 3

For anyone still looking for this, inverted event lists using jquery:

eventAfterAllRender: function(view) {
    var eventosRendered = $('#timeline tr');
    var eventosInversa = [];
    var headingPendiente = null;
    eventosRendered.map(function(key, evento) {
        switch(evento.className) {
            case 'fc-list-heading':
                if (headingPendiente) {
                    eventosInversa.unshift(headingPendiente);
                }
                headingPendiente = evento;
                break;
            case 'fc-list-item':
                eventosInversa.unshift(evento);
                break;
        }
    });
    eventosInversa.unshift(headingPendiente);

    $('#timeline tbody').append(eventosInversa);
}