在完整日历中传递动态数据时出错

Question

我正在使用FullCalendar。我有以下绑定

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    defaultDate: '2017-03-23',
    navLinks: true, // can click day/week names to navigate views
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    events: [{ "title": "General Meeting", "start": "3/23/2017, 10:00:00 AM", "end": "3/23/2017, 11:00:00 AM" }, { "title": "Client Meeting", "start": "3/23/2017, 12:00:00 PM", "end": "3/23/2017, 1:00:00 PM" }]
});

上面的代码运行良好。

但是当我尝试将我的 json 分配给变量并将该变量传递给日历事件时，我遇到了错误：

https://site-url/MyData 404 未找到

在这里，"MyData"是我的json数据。它附加了 URL 并抛出上面的错误。

我正在使用的示例代码

var calendarData = [{ "title": "General Meeting", "start": "3/23/2017, 10:00:00 AM", "end": "3/23/2017, 11:00:00 AM" }, { "title": "Client Meeting", "start": "3/23/2017, 12:00:00 PM", "end": "3/23/2017, 1:00:00 PM" }];
$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    defaultDate: '2017-03-23',
    navLinks: true, // can click day/week names to navigate views
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    events: calendarData
});

我无法找出问题所在。请建议

Answer 1

尝试动态添加事件

  $('#calendar').fullCalendar({
header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2017-03-23',
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events    
 });
 var calendarData = [{ "title": "General Meeting", "start": "3/23/2017, 10:00:00 AM", "end": "3/23/2017, 11:00:00 AM" }, { "title": "Client Meeting", "start": "3/23/2017, 12:00:00 PM", "end": "3/23/2017, 1:00:00 PM" }];
 $("#calendar").fullCalendar( 'addEventSource', calendarData  );

Answer 2

我已经用事件源选项更新了你的代码。 试试这个。

    var calendarData = [{ "title": "General Meeting", "start": "3/23/2017, 10:00:00 AM", "end": "3/23/2017, 11:00:00 AM" }, { "title": "Client Meeting", "start": "3/23/2017, 12:00:00 PM", "end": "3/23/2017, 1:00:00 PM" }];
$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    defaultDate: '2017-03-23',
    navLinks: true, // can click day/week names to navigate views
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    eventSources: [{
         events: calendarData
    }]
});

查看示例 JSFiddle

Answer 3

感谢您的支持。但我犯了真正的错误。

我正在构建我的阵列

calendarData.push({"title": bookingInformations[i].Subject, "start": new Date(bookingInformations[i].StartDateTime).toLocaleString(), "end": new Date(bookingInformations[i].EndDateTime).toLocaleString() });

我刚刚更改了数组构建，如下所示

calendarData.push({title: bookingInformations[i].Subject, start: new Date(bookingInformations[i].StartDateTime).toLocaleString(), end: new Date(bookingInformations[i].EndDateTime).toLocaleString()});

它解决了这个问题。