Full Calendar feed with JSON ( Getting data from a restfull webservice ) - json

Question

i have this situation.
I need to use fullCalendar 3.8 to show some reservations.
I have the back end that give me the data in JSON format ( i have about 10 fields ).
In front-end i have a JSP that inlcude fullcalendar, moment and jquery. I need to populate my FullCalendar.
Example the Json that i have is in this form:
[
{
"idReservation": 21,
"idUser": 2,
"idSale": 1,
"timeStart": 1513839600000,
"timeEnd": 1513850400000
},
{
"idReservation": 22,
"idUser": 1,
"idSale": 1,
"timeStart": 1513854000000,
"timeEnd": 1513857600000
} ]
Someone can tell me where can i start to study, make test in the way to feed my calendar with this data ?
i have try to read a lot of articles but cause i am not a Front-End developer i am loosing around :)
The Javascript code that i created is this one:
$(document).ready(function() {
var value=2;
returnReservationsCalendar(value);
});
function returnReservationsCalendar(value){
var serviceEndpoint =
'http://localhost:8080/sale/'+value+'/reservations';
$.ajax({
type : 'GET',
url: serviceEndpoint,
dataType: 'json',
contentType : 'application/json',
success: function (result) {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2014-11-13',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: function (start, end, timezone, callback) {
var events = [];
$.each(result, function (index) {
events.push({
"title": "Event " + index,
"start": result[index].timeStart.toISOString(),
"end": result[index].timeEnd.toISOString(),
});
});
callback(events);
}
});
},
error: function () { alert('Failed!'); }
});
}
At the JSP i have only this code:
<div id="calendar"></div>
The problem is that i have the json response from ajax but i dont understand where i am making the mistake about populating the calendar with the data from json.

Answer 1

You should be seeing errors in your browser's console similar to this (this is as per Google Chrome, others may vary slightly):
Uncaught TypeError: result[index].timeStart.toISOString is not a
function
Simply this is because timeStart is a string from your JSON, not a momentJS or Date object.
You need to pass it through the momentJS constructor before this will work:
events.push({
"title": "Event " + index,
"start": moment(result[index].timeStart).toISOString(),
"end": moment(result[index].timeEnd).toISOString(),
});
See http://jsfiddle.net/sbxpv25p/166/ for a working demo (using a static event list instead of ajax, but it demonstrates the part which is relevant to this answer.