FullCalendar - list view multi-day events not grouping correctly

Question

I'm trying to set a FullCalendar with Month, Week, Day and List view options, and this is working fine for almost evrything, as you can see here:

But, in the ListView, the first event that's a multi-day event isn't grouping with other evento between it start and end dates:

I'm trying to use the code below that I get from this issue's answer: fullCalendar multi-day event start and end times (I haven't enough reputation to answer or comment there, so I'm creating this new one)

events.push({
  title: "Birmingham Comic Con",
  start: new Date('2016-11-20T09:00'),
  end: new Date('2016-11-22T19:00'),
  id: 1,
  isMultipleDay: true,
  multipleDayEvents: [
    {
      start: new Date('2016-11-20T09:00'),
      end: new Date('2016-11-20T19:00'),
      allDay: false,
      description: 'Day 1',
    },
    {
      start: new Date('2016-11-21T09:00'),
      end: new Date('2016-11-20T19:00'),
      allDay: false,
      description: 'Day 2'
    },
    {
      start: new Date('2016-11-22T09:00'),
      end: new Date('2016-11-22T19:00'),
      allDay: false,
      description: 'Day 3'
    }
  ]
});
events.push({
  title: "Birmingham Comic Con Outro",
  start: new Date('2016-11-20T10:00'),
  end: new Date('2016-11-20T19:00'),
  id: 2
});
events.push({
  title: "Birmingham Comic Con No meio",
  start: new Date('2016-11-21T10:00'),
  end: new Date('2016-11-21T19:00'),
  id: 3
});

This is the full code:

$(document).ready(function () {
    moment.locale(idioma);
    var today = moment(Date()).format("YYYY-MM-DD");
    var status = '';
    var vencimento = '';
    var description = '';
    var action = '';
    var setColor = '';

    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay,listMonth'
        },
        defaultDate: today,
        defaultView: 'month',
        listDayFormat: 'dddd',
        listDayAltFormat: 'LL',
        locale: 'en',
        editable: false,
        eventLimit: true, // allow "more" link when too many events
        events: function (start, end, timezone, callback) {
            jQuery.ajax({
                url: window.root + "Calendarios/GetEvents",
                type: 'POST',
                dataType: 'json',
                data: {
                    start: start.format(),
                    end: end.format(),
                    agendado: $("#Agendado").is(":checked"),
                    realizado: $("#Realizado").is(":checked"),
                    atrasado: $("#Atrasado").is(":checked")
                },
                success: function (data) {
                    var events = [];
                    /*
                    if (data.Success) {
                        $.map(data.Treinamentos, function (t) {
                            if (t.Status == 2) {
                                setColor = "green";
                            } else {
                                if (t.Status == 1 && (moment() > moment(t.DataFinal)))
                                    setColor = "red";
                                else
                                    setColor = "";
                            }

                            t.Participantes.forEach(function (item) {
                                if (item.Status == 2) {
                                    setColor = "green";
                                } else {
                                    if (t.Status == 1 && (moment() > moment(t.DataFinal)))
                                        setColor = "red";
                                    else
                                        setColor = "";
                                }

                                events.push({
                                    id: item.Id,
                                    title: item.Funcionario.Registration + " - " + item.Funcionario.Name,
                                    start: moment(t.DataInicial).format("YYYY-MM-DDTHH:mm:ss"),
                                    end: moment(t.DataFinal).format("YYYY-MM-DDTHH:mm:ss"),
                                    color: setColor,
                                    description: t.InfoCardNumber + " - " + t.Revision,
                                    url: window.root + "Treinamentos/Index/" + t.Id
                                });
                            });
                        });
                    }
                    */
                    events.push({
                        title: "Birmingham Comic Con",
                        start: new Date('2016-11-20T09:00'),
                        end: new Date('2016-11-22T19:00'),
                        id: 1,
                        isMultipleDay: true,
                        multipleDayEvents: [
                          {
                              start: new Date('2016-11-20T09:00'),
                              end: new Date('2016-11-20T19:00'),
                              allDay: false,
                              description: 'Day 1',
                          },
                          {
                              start: new Date('2016-11-21T09:00'),
                              end: new Date('2016-11-20T19:00'),
                              allDay: false,
                              description: 'Day 2'
                          },
                          {
                              start: new Date('2016-11-22T09:00'),
                              end: new Date('2016-11-22T19:00'),
                              allDay: false,
                              description: 'Day 3'
                          }
                        ]
                    });
                    events.push({
                        title: "Birmingham Comic Con Outro",
                        start: new Date('2016-11-20T10:00'),
                        end: new Date('2016-11-20T19:00'),
                        id: 2
                    });
                    events.push({
                        title: "Birmingham Comic Con No meio",
                        start: new Date('2016-11-21T10:00'),
                        end: new Date('2016-11-21T19:00'),
                        id: 3
                    });
                    callback(events);
                }
            });
        },
        eventRender: function (event, element) {
            element.popover({
                title: event.title,
                placement: "auto",
                html: true,
                trigger: "click",
                animation: "true",
                content: event.description,
                container: "body"
            });
        },
        eventMouseout: function (event, jsEvent, view) {
            $(this).popover("hide");
        },
        eventMouseover: function (event, jsEvent, view) {
            $(this).popover("show");
        }
    });

    //Botão Mostrar Filtro
    $("#BtShowFilter").html(ShowFilter);
    $("#BtShowFilter").on("click", function () {
        $("#Filter").slideToggle(function () {
            var text = $("#Filter").css("display") === "none" ? ShowFilter : HideFilter;
            $("#BtShowFilter").html(text);
        });

    });

    //Botão Filtro
    $("#BtFilter").on("click", function () {
        $('#calendar').fullCalendar("refetchEvents");
    });

});

Answer 1

I was actually dealing with the same issues. I was able to fix it by moving to the latest release of FullCalendar (3.0.1). They have a fix for this bug in list view or at least it took care of my issue. It looks like it is the exact same as yours.

Release Notes: https://github.com/fullcalendar/fullcalendar/releases/tag/v3.0.1

Hope this fixes your problems too!