Если вы заглянете в консоль вашего браузера, я ожидаю, что у вас будет одна или две ошибки.
title: result.Subject;
start: result.StartDate.format();
end: result.EndDate.format()
неправильно - ничего полезного не дает. Я вижу, что вы пытаетесь сделать (т.е. установить имена полей, которые соответствуют ожидаемой структуре событий fullCalendar), но для этого вам нужно создать объект.
К сожалению, сделав это, вы затем усугубите проблему, написав var calevents = result; - поэтому вы просто помещаете необработанный массив результатов в calEvents, игнорируя все ваши попытки обработать его, чтобы соответствовать ожиданиям fullCalendar.
Тогда есть StartDate.format() ...
Почему это проблема? Потому что ваши данные анализируются из вашего JSON. В вашем JSON StartDate и EndDate - строки (представляющие даты, но, тем не менее, строки). Поэтому в вашем массиве result они все равно будут строками. Строки не имеют format() метод. Из-за этого ваш код не работает (кроме всех других проблем!).
FullCalendar (который использует моментJS для работы с датами) может принимать даты различными способами (см. https://fullcalendar.io/docs/moment и https://momentjs.com/docs/#/parsing/string/ для получения дополнительной информации).
Он может принимать даты в виде строки, но не в указанном вами формате - это неоднозначно. «4/1/2018» может быть 1 апреля или 4 января, в зависимости от того, как вы его читаете, и, как правило, от того, как вы его читаете, зависит от условий страны, в которой вы живете. Компьютер, однако, не может быть уверен, какой именно вы намеревались, если вы не скажете это.
Итак, у вас есть два варианта:
Вариант 1)
Если вы по какой-либо причине не можете / не хотите изменять исходные данные JSON, вам необходимо создать объект события (или изменить существующие), у которого имена полей и форматы соответствуют полному календарю. Вам необходимо установить правильные свойства, а также использовать momentJS для разбора даты, если вы укажете формат даты:
events: function(start, end, callback) {
// do some asynchronous ajax
$.getJSON("/outlookHolidayCalendar2018.JSON", function(result) {
for (i = 0; i < result.length; i++) {
result[i].title = result[i].Subject;
result[i].start = moment(result[i].StartDate, "MM/DD/YYYY");
result[i].end = moment(result[i].EndDate, "MM/DD/YYYY")
}
callback(result);
});
},
Примечания:
а. fullCalendar может принимать объект momentJS в качестве входных данных, поэтому нет необходимости использовать .format(), чтобы снова превратить его в строку.
б. Ваш синтаксис for был полностью неверным - это синтаксис для итерации свойств объекта, а не индексов массива. И result - это весь массив, а не отдельный элемент.
с. if оператор был немного излишним. Возврат результатов не указывает на ошибку, он просто указывает на отсутствие результатов. Если результатов нет, то в календаре нет событий, вот и все. Это не ошибка или ошибка.
* * +1045 д. Отправка параметров «start» и «end» в вашем запросе $ .getJSON бесполезна, поскольку вы обращаетесь к статическому файлу JSON. Отправка этих параметров полезна только в том случае, если вы отправляете запрос в серверный скрипт, который может их обработать и использовать для ограничения диапазона данных, возвращаемых в fullCalendar. Поэтому я удалил их из своего примера.
Вариант 2)
Более понятный вариант - изменить JSON, чтобы он выводил строки даты в однозначном формате. fullCalendar и momentJS принимают строки даты в международном стандарте IS0-8601, часть даты в формате YYYY-MM-DD, например, 2018-04-01. На этом этапе также было бы целесообразно объединить поля даты и времени в одно, поскольку fullCalendar будет считывать одну строку даты / времени для начала и конца. Тогда вам не нужно объединять их позже. Пример, который вы привели, помечен как событие на весь день, поэтому он не применяется, но это будет образец для других событий.
На самом деле, если вы сделаете небольшой пересмотр своего JSON, вы можете перевести его в состояние, когда вам вообще не нужно обрабатывать его с помощью JavaScript, и просто передать его непосредственно в fullCalendar как есть.
Напишите событие в формате JSON следующим образом:
{
"title": "Easter Day",
"start": "2018-04-01",
"end": "2018-04-02",
"allDay": true,
"Reminder_on_off": false,
"ReminderDate": "2018-03-31 23:45:00",
"MeetingOrganizer": "",
"RequiredAttendees": "",
"OptionalAttendees": "",
"MeetingResources": "",
"BillingInformation": "",
"Categories": "",
"Description": "",
"Location": "United States",
"Mileage": "",
"Priority": "Normal",
"Private": false,
"Sensitivity": "Normal",
"Show_time_as": 3
},
и тогда в своем JavaScript вы можете просто написать:
events: "/outlookHolidayCalendar2018.JSON"
и избавьтесь от всей этой функции, поскольку имена полей и форматы полей title, start, end и allDay соответствуют ожиданиям fullCalendar (см. https://fullcalendar.io/docs/event-object).
P.S. Ваша опция "googleCalendarAPIKey" и строка "contentType" также кажутся избыточными. Первый бесполезен, потому что вы не обращаетесь к календарю Google в своем коде, а второй просто никуда не денется, он просто объявляется (в любом случае неправильно, как если бы он был свойством объекта), а затем отбрасывается. Вы также можете удалить сценарий gcal.js, поскольку он предназначен только для загрузки из календарей Google.
Исходя из всего этого, я думаю, что самое важное, что вам нужно сделать сейчас, это более подробно изучить синтаксис JavaScript, а также научиться использовать инструменты разработчика вашего браузера (содержащие консоль и другие инструменты) для отладки ваших программ и просмотра за ошибки.