As far as I can see this has nothing to do with the quote marks round the keys. Valid JSON must have quote marks round the keys, that is a requirement of the specification. (Note that this doesn't apply to JavaScript literal objects).
First you claimed that the code:
function events() {
return [{
"id": 1,
"title": "event1",
"start": "2019-05-03",
"end": "2019-05-03"
},
{
"id": 2,
"title": "event2",
"start": "2019-05-10",
"end": "2019-05-10"
},
];
}
didn't work properly. I'm not sure how you came to this conclusion. It works perfectly. Here's a demo: http://jsfiddle.net/Lgz6qvy5/ . However, since this code actually uses a JS object literal and not JSON (please make sure you go and google the difference between these two things!), this example is really not very relevant anyway.
Then you moved on to making your event function make an AJAX call to retrieve the events. This is a good idea of course, but you have a key conceptual problem with what you've written.
You have to bear in mind that AJAX calls are asynchronous. The response only arrives within a callback function. That function is executed at some later time from when the request was initiated. The "success" callback function is called by jQuery's code, at the time it receives the response from the server. Therefore, returning a value from that code makes no sense - 1) the value is returned to somewhere in the jQuery code which called the function...that code is not interested in your event data. 2) Even if doing that worked, the actual "events()" function has long since finished executing - due to the AJAX being asynchronous, it didn't wait for the AJAX call to finish before returning.
Luckily, to get round this problem, fullCalendar provides you with a mechanism where you can return the event data to it at the end of an asychronous AJAX request. This is done by providing you with the events-as-a-function pattern whereby you provide events: with a reference to a callback function (instead of just the result of a function. This function is executed whenever the calendar needs to retrieve events, including when the calendar is first loaded. fullCalendar then supplies the function with a reference to a further callback function which you can call when your AJAX call has completed, and can pass your event data to. When this callback is executed, it adds the data to your calendar.
Here's an example of how you can implement this:
$('#m_calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
editable: true,
events: events, //note that without the () this is a _reference_ to the function, it does not execute the function immediately
});
function events(start, end, timezone, callback) { //parameters as shown in the documentation
$.ajax({
type: "POST",
url: "Calendar.aspx/GetData1",
dataType: "json",
success: function (response) {
callback(response.d); //run the provided callback function, to pass the events to fullCalendar
},
});
}
N.B. You should also consider modifying your C# code to accept the "start" and "end" parameters supplied by the callback (and of course modify your AJAX request code accordingly to). The C# would then only return events which occur between the stated start and end dates. This makes the code more efficient because it only returns data which is actually going to be shown on the calendar, rather than returning every event ever added to your database. (If the user ever moves the calendar to a new date where no data has been downloaded, fullCalendar will automatically execute the function again and get the necessary events from the server for the new date range.)
P.S. Please also read this question which has some good general information about working with asynchronous code such as AJAX.
