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

Question

I'm currently trying to test out FullCalendar (version 2.2.6) addEventSource

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

but I'm always getting this error:

Uncaught TypeError: Cannot read property 'hasTime' of undefined

Both sources are hard coded and loading the calendar with either source loads the events successfully, so no date is incorrect.

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'
}];

Loading the calendar:

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

The error is displayed only when calling addEventSource . I'm not sure what's wrong exactly.

UPDATE

I know the documentation of addEventSource and removeEventSource mention using an array as a source but it looks like it does not work, cal_events_1 and cal_events_2 are both an array of objects. Using an object worked:

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

You need the end time.

try this:

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

Answer 2

我发现错误主要是针对事件的错误数据结构，“start”或“end”属性的空数据或源数据中的无效日期格式。

Answer 3

addEventSource doesn't really accepts array. My advise is to iterate over cal_events_1 or cal_events_2 to have something like this after each iteration:

$('#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

I'm passing my in time and out time from database . I have fixed this error by specifying the in time as start and out time as end because the FullCalender.js checks for the in time and out time with that variable also I forgot to add semicolon . for GenerateCalender function.This is my code-

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

                        });
}