FullCalendar v.2.2.6 使用 addEventSource 时'hasTime'未定义的错误

Question

我目前正在尝试测试FullCalendar（2.2.6版）addEventSource

$('button').click(function() {
    $("#calendar").fullCalendar('removeEventSource', cal_events_1);
    $("#calendar").fullCalendar('addEventSource', cal_events_2);
});

但我总是收到此错误：

Uncaught TypeError: Cannot read property 'hasTime' of undefined

两个源都是硬编码的，使用任一源加载日历都会成功加载事件，因此没有日期不正确。

var cal_events_1 = [
{
  events: [
  {
      title: 'event 1',
      start: '2015-01-04',
      color: 'tomato'
  },
  {
      title: 'event 2',
      start: '2015-01-09'
  }],
  color: '#55B2DA',
  textColor: '#3c3c3c'
},
{
  events: [
  {
      title: 'event 3',
      start: '2015-01-06'
  },
  {
      title: 'event 4',
      start: '2015-01-07'
  }],
  color: 'rgb(255, 162, 71)',
  textColor: '#3c3c3c'
},
{
    events: [
    {
        title: 'event 5',
        start: '2015-01-09'
    },
    {
        title: 'event 6',
        start: '2015-01-12'
    }],
    color: 'rgb(91, 228, 118)',
    textColor: '#3c3c3c'
}];
var cal_events_2 = [
{
  events: [
  {
      title: 'event 1',
      start: '2015-01-04',
      color: 'tomato'
  },
  {
      title: 'event 2',
      start: '2015-01-09'
  },
  {
      title: 'event 3',
      start: '2015-01-09'
  }],
  color: '#55B2DA',
  textColor: '#3c3c3c'
},
{
    events: [
    {
        title: 'event 4',
        start: '2015-01-09'
    },
    {
        title: 'event 5',
        start: '2015-01-12'
    }],
    color: 'rgb(91, 228, 118)',
    textColor: '#3c3c3c'
}];

加载日历：

$("#calendar").fullCalendar({
    eventSources:  cal_events_1 // or cal_events_2
});

仅当调用 addEventSource 时才会显示该错误。我不确定到底出了什么问题。

更新

我知道addEventSource的文档，removeEventSource提到使用数组作为源，但看起来它不起作用，cal_events_1和cal_events_2都是对象的数组。使用对象有效：

var my_events = {
  events: [
    {
      title: 'event 1',
      start: '2015-01-04',
      color: 'tomato'
    },
    {
      title: 'event 2',
      start: '2015-01-09'
    },
    {
      title: 'event 3',
      start: '2015-01-09'
    }
  ],
  color: '#55B2DA',
  textColor: '#3c3c3c'
};
$('button').click(function() {
    $("#calendar").fullCalendar('removeEvents');
    $("#calendar").fullCalendar('addEventSource', my_events);
});

Answer 1

你需要结束时间。

试试这个：

var my_events = {
  events: [
    {
      title: 'event 1',
      start: '2015-01-04',
      end: '2015-01-06',
      color: 'tomato'
    },
  ]
};

Answer 2

我发现该错误主要是由于事件的数据结构错误，"开始"或"结束"属性的空数据或源数据中的日期格式无效。

Answer 3

addEventSource并不真正接受数组。我的建议是迭代cal_events_1或cal_events_2，以便在每次迭代后获得类似的东西：

$('#calendar').fullCalendar('addEventSource', {
    events: [
    {
        title: 'event 5',
        start: '2015-01-09'
    },
    {
        title: 'event 6',
        start: '2015-01-12'
    }],
    color: 'rgb(91, 228, 118)',
    textColor: '#3c3c3c'
})

Answer 4

我正在从数据库中传递我的时间和退出时间。我通过将 in time 指定为开始和将 out 时间指定为结束来修复此错误，因为 FullCalender.js 使用该变量检查输入时间和退出时间，我也忘记添加分号。用于生成日历功能。这是我的代码-

var event_array = [];
                    var selectedEvent = null;
                    FetchEventAndRenderCalendar();
                    function FetchEventAndRenderCalendar() {
                        events = [];
                        $.ajax({
                            url: "/Home/GetEvents",
                            data: "",
                            type: "GET",
                            dataType: "json",
                            async: false,
                            cache: false,
                            success: function (data) {
                                alert("success");
                                $.each(data, function (i, v) {
                                    event_array.push({
                                        userid: v.UserId,
                                        start: moment(v.LoginTime),
                                        //end: moment(v.LogoutTime)
                                        //start: moment(v.start),
                                        end: v.LogoutTime != null ? moment(v.LogoutTime) : null
                                        //color: v.themecolor,
                                        //allday: v.isfullday
                                    });
                                })
                                GenerateCalender(event_array);
                            },
                            error: function (error) {
                                alert('failed');
                            }
                        })
                    }
 function GenerateCalender(event_array) {
 $('#calender').fullCalendar({
                            events: event_array
                        });
}