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找不到

在这里，＆＃34; MyData＆＃34;是我的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

我已使用eventSources选项更新了您的代码。试试这个。

<div class="dslc-modules-area dslc-col dslc-12-col dslc-last-col" data-size="12">
  <div id="dslc-module-6dbe075eac8" class="dslc-module-front dslc-module-DSLC_TP_Title dslc-in-viewport-check dslc-in-viewport-anim-none  dslc-col dslc-12-col dslc-last-col  dslc-module-handle-like-regular  dslc-in-viewport" data-module-id="6dbe075eac8"
    data-dslc-module-id="DSLC_TP_Title" data-dslc-module-size="12" data-dslc-anim="none" data-dslc-anim-delay="0" data-dslc-anim-duration="650" data-dslc-anim-easing="ease" data-dslc-preset="none" style="animation: forwards 0.65s ease none;">
    <div class="dslc-tp-title">
      <h1>Difference between StringBuffer and StringBuilder</h1>
    </div>
  </div>
  <!-- .dslc-module -->
</div>
<div id="dslc-module-a2d37913705">
  <div class="dslc-tp-content">
    <div id="dslc-theme-content">
      <div id="dslc-theme-content-inner">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
          desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
      </div>
    </div>
  </div>

</div>

查看示例JSFiddle

Answer 2

尝试动态添加事件

  $('#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 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()});

它解决了这个问题。

在FullCalendar

3 个答案: