CODEWITHSUNDEEP
javascriptjqueryfullcalendar
j.grima
j.grima

Reputation: 1941

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

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

Upvotes: 9

Views: 15704

Answers (4)

Judson Abraham
Judson Abraham

Reputation: 412

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

                        });
}

Upvotes: 0

nickol
nickol

Reputation: 1

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

Upvotes: 0

Syed Ekram Uddin
Syed Ekram Uddin

Reputation: 3091

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.

Upvotes: 2

PX10
PX10

Reputation: 63

You need the end time.

try this:

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

Upvotes: 6

Related Questions