Question

如何反转列表视图中的事件，以便具有最具未来主义日期的事件出现在开头（顶部）？

Answer 1

对于仍在寻找此结果的人，可以使用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);
}

Answer 2

@ F.Mora您的解决方案几乎是完美的，但在我们的案例中，我们添加了一些自定义类名，并且每个标题下都有多个项目。

这是我们的增强版本：

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 3

这是我使用的版本（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 4

我将它用于 fullCalendar v5。它基于@Yo1 答案

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

FullCalendar：显示反转列表视图

4 个答案: