Насколько я понимаю, это не имеет ничего общего с кавычками вокруг клавиш. Действительный JSON должен иметь кавычки вокруг ключей, что является требованием спецификации. (Обратите внимание, что это не относится к литеральным объектам JavaScript).
Сначала вы заявили, что код:
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"
},
];
}
не работает должным образом. Я не уверен, как вы пришли к такому выводу. Работает отлично. Вот демо: http://jsfiddle.net/Lgz6qvy5/. Однако, поскольку этот код на самом деле использует литерал объекта JS, а не JSON (пожалуйста, убедитесь, что вы поймете разницу между этими двумя вещами!), Этот пример на самом деле не очень актуален.
Затем вы перешли к тому, чтобы заставить функцию обработки событий вызывать AJAX для извлечения событий. Конечно, это хорошая идея, но у вас есть ключевая концептуальная проблема с тем, что вы написали.
Вы должны иметь в виду, что AJAX-вызовы асинхронны . Ответ приходит только внутри функции обратного вызова. Эта функция выполняется через некоторое время после начала запроса. Функция обратного вызова «success» вызывается кодом jQuery во время получения ответа от сервера. Следовательно, возвращать значение из этого кода не имеет смысла - 1) значение возвращается куда-то в коде jQuery, который вызвал функцию ... этот код не заинтересован в данных вашего события. 2) Даже если это сработало, фактическая функция «events ()» давно завершила выполнение - из-за асинхронности AJAX она не дожидалась завершения вызова AJAX, прежде чем вернуться.
К счастью, чтобы обойти эту проблему, fullCalendar предоставляет вам механизм, с помощью которого вы можете возвращать ему данные события в конце асинхронного запроса AJAX. Это достигается путем предоставления вам шаблона events-as-a-function , в котором вы предоставляете events: ссылку на функцию обратного вызова (вместо просто результата ). функции. Эта функция выполняется всякий раз, когда календарю необходимо получить события, в том числе при первой загрузке календаря, затем fullCalendar предоставляет функции ссылку на дополнительную функцию обратного вызова, которую вы можете вызвать после завершения вызова AJAX. и может передавать данные о вашем событии. При выполнении этого обратного вызова данные добавляются в ваш календарь.
Вот пример того, как вы можете реализовать это:
$('#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. Вам также следует подумать о том, чтобы изменить свой код C # для принятия параметров «начало» и «конец», предоставленных обратным вызовом (и, конечно, соответственно изменить код запроса AJAX). Тогда C # будет возвращать только события, которые происходят между указанными датами начала и окончания. Это делает код более эффективным, потому что он возвращает только данные, которые фактически будут отображаться в календаре, а не возвращает каждое событие, когда-либо добавленное в вашу базу данных. (Если пользователь когда-либо переместит календарь на новую дату, когда данные не были загружены, fullCalendar автоматически выполнит функцию снова и получит необходимые события от сервера для нового диапазона дат.)
P.S. Прочтите также этот вопрос , в котором содержится хорошая общая информация о работе с асинхронным кодом, таким как AJAX.