FullCalendar - 列出未正确分组的多日事件视图

Question

我试图设置一个包含月，周，日和列表视图选项的FullCalendar，这对于几乎一切都很好，正如你在这里看到的那样：

但是，在ListView中，第一个多日活动的事件不是在开始日期和结束日期之间与其他事件进行分组：

我试图使用下面的代码，我从这个问题得到答案：fullCalendar multi-day event start and end times（我没有足够的声誉来回答或评论，所以我＆＃39 ; m创建这个新的）

＆＃13;

＆＃13;

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
});

＆＃13;

＆＃13;

＆＃13;

这是完整的代码：

＆＃13;

＆＃13;

$(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");
    });

});

＆＃13;

＆＃13;

＆＃13;

Answer 1

我实际上是处理同样的问题。我能够通过移动到最新版本的FullCalendar（3.0.1）来修复它。他们在列表视图中修复了这个错误，或者至少它解决了我的问题。它看起来和你的一模一样。

发行说明：https://github.com/fullcalendar/fullcalendar/releases/tag/v3.0.1

希望这也可以解决你的问题！