Send fullcalendar start and end date via ajax after selection - ajax

Question

I need to send the start and end dates via ajax to the server to save them to the database. I am trying to do an ajax call after the unselect method by the ajax call does not fire. I am not sure what the problem is. Please help.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
defaultDate: '<?php echo date("Y-m-d") ?>',
defaultView: 'agendaWeek',
selectable: true,
selectHelper: true,
select: function(start, end) {
//var title = prompt('Event Title:');
var title = $("#gym_mbr_name").val();
var eventData;
if (title) {
eventData = { title: title, start: start, end: end };
var calendar_datetime = $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
$.ajax({
url: '<?php echo BASE_URL; ?>ajax/add_membership_schedule.php',
type: 'POST',
data: { start: start, end: end },
beforeSend: function(){ },
complete: function(){ }
}).done(function(resp){
alert(resp);
});
},
editable: true,
eventLimit: true, // allow "more" link when too many events
events: []
});
When I try to alert the resp, it does not give any output, in fact the ajax call does not fire itself. Please help.

Answer 1

It seems to work for me.
Note that start and end are FCMoments (strange creatures derived from Moments) and you want to convert them to strings or something before using them in your ajax call.
Also, try using 'success' instead of 'done'.
See an example here: http://jsfiddle.net/3E8nk/507/
$("#calendar").fullCalendar({
header: {
left: "prev,next today",
center: "title",
right: "month,agendaWeek,agendaDay"
},
defaultDate: "2014-06-12",
editable: true,
selectable: true,
selectHelper: true,
select: function(a, b) {
alert("selected from: " + a.format() + ", to: " + b.format());
$("#calendar").fullCalendar("unselect");
$.ajax({
url: "http://www.google.com",
type: "GET",
data: {
q: "test"
},
dataType: "html",
success: function(a) {
alert("Data: " + a);
},
error: function(a, b) {
alert("Request: " + JSON.stringify(a));
}
});
},
unselect: function() {
alert("unseleted");
},
events: [ {
title: "All Day Event",
start: "2014-06-01"
}, {
title: "Long Event",
start: "2014-06-07",
end: "2014-06-10"
}, {
id: 999,
title: "Repeating Event",
start: "2014-06-09T16:00:00"
}, {
id: 999,
title: "Repeating Event",
start: "2014-06-16T16:00:00"
}, {
title: "Meeting",
start: "2014-06-12T10:30:00",
end: "2014-06-12T12:30:00"
}, {
title: "Lunch",
start: "2014-06-12T12:00:00"
}, {
title: "Birthday Party",
start: "2014-06-13T07:00:00"
}, {
title: "Click for Google",
url: "http://google.com/",
start: "2014-06-28"
} ]
});
If looking at that doesn't help then try posting what the php produces.

Answer 2

In the latest version of FullCalendar, We have to catch the MOMENT DATE an format on yyyy-mm-dd or same. So, for me this code is working:
start = $.fullCalendar.moment(start).format("YYYY-MM-DD HH:mm:ss");
end = $.fullCalendar.moment(end).format("YYYY-MM-DD HH:mm:ss");