FullCalendar v.2.2.6 'hasTime' undefined error when using addEventSource

≯℡__Kan透↙ 提交于 2019-11-30 03:03:52

问题


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

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



回答2:


I found that error mostly for wrong data structure for event(s), null data for 'start' or 'end' property or invalid date format in source data.




回答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'
})



回答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

                        });
}


来源:https://stackoverflow.com/questions/28027748/fullcalendar-v-2-2-6-hastime-undefined-error-when-using-addeventsource

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!