I'm using the select callback when adding events. The following code worked in v1 but I'm getting the Uncaught TypeError in v2. When I remove the ajax code there is no error but of course I need to add the new event to the database.

select: function(start, end, jsEvent, view) {
  var title = 'Available';
  var eventData;
  eventData = {
    title: title,
    start: start
  };
  $.ajax({
    type : 'POST',
    url : 'add-event.php',
    data: eventData,
    success : function(data){
      $('#calendar').fullCalendar('renderEvent', {
        id: data.id,
        title: data.title,
        start: data.start,
        start: data.end
      }, true);
      $('#calendar').fullCalendar('unselect');
    },
    error : function(XMLHttpRequest, textStatus, errorThrown) {
    }
  });


},

I'm using the select callback when adding events. The following code worked in v1 but I'm getting the Uncaught TypeError in v2. When I remove the ajax code there is no error but of course I need to add the new event to the database.

select: function(start, end, jsEvent, view) {
  var title = 'Available';
  var eventData;
  eventData = {
    title: title,
    start: start
  };
  $.ajax({
    type : 'POST',
    url : 'add-event.php',
    data: eventData,
    success : function(data){
      $('#calendar').fullCalendar('renderEvent', {
        id: data.id,
        title: data.title,
        start: data.start,
        start: data.end
      }, true);
      $('#calendar').fullCalendar('unselect');
    },
    error : function(XMLHttpRequest, textStatus, errorThrown) {
    }
  });


},

• javascript
• jquery
• ajax
• fullcalendar

4 Answers 4

Try send startDate and endDate in a format use format() for it.

select: function(start, end, jsEvent, view) {
  var title = 'Available';
  var eventData;
  eventData = {
    title: title,
    start: start
  };
  $.ajax({
    type : 'POST',
    url : 'add-event.php',
    data: eventData,
    success : function(data){
      $('#calendar').fullCalendar('renderEvent', {
        id: data.id,
        title: data.title,
        start: data.start.format(),
        end: data.end.format()
      }, true);
      $('#calendar').fullCalendar('unselect');
    },
    error : function(XMLHttpRequest, textStatus, errorThrown) {
    }
  });


},

You can refer to Momentjs

Please check the event data . Source attribute of your event must be null or not populated. SO before calling

$('#calendar').fullCalendar('renderEvent', event);

You have to be make sure that required attribute of your fullcalendar event must be populated. Here is the link for required and optional fieldfor event object.

http://fullcalendar.io/docs/event_data/Event_Object/

The "calendar" script used in both version is different.

If You observe, the call made to your php file in V1 is:

get-events?start=1362076200000&end=1364754600000&_=1403859868502

and the call made by V2:

get-events.php?start=2014-06-01&end=2014-07-13&_=1403859868502

Hope this will help You somewhat.

I encountered this and noticed that v2 seems to set some extra _start and _end parameters in the event object. I found that I needed to do: start = _start.format() in order to prevent moment from trying to serialise this. I'm not sure this is the optimal solution, but perhaps it'll help you.