FullCalendar 不显示来自 JSON 数据的事件

Question

我已将 FullCalendar 控件添加到 Aurelia 项目并显示日历，但未显示来自我的 JSON 源（跨域）的任何事件。

events.js

import { fullCalendar } from 'fullcalendar';

export class Events {
  heading = "Welcome to Events";

  attached() {
    $('#eventscalendar').fullCalendar({
      weekends: false,
      header: {
        left: '',
        center: 'prev title next',
        right: ''
      },
      eventSources: [
        {
          url: 'http://mydomain/pub/api_events_aurelia.php',
          dataType: 'jsonp',
          color: 'yellow',
          textColor: 'black'
        }
      ],
      loading: function (bool) {
        if (bool) $('#loading').show();
        else $('#loading').hide();
      }
    });

  }

  refreshEvents() {
    // reload events
    console.log("refreshing...");
    $('#eventscalendar').fullCalendar('refetchEvents');
  }
}

events.html

<template>
  <require from="fullcalendar/fullcalendar.css"></require>

  <h2 class="text-center">${heading}</h2>

  <!-- bootstrap element for FullCalendar -->
  <button class="btn btn-primary" click.trigger="refreshEvents()">Refresh</button>
  <div class="alert alert-info pull-right" id="loading">Loading...</div>
  <div id="eventscalendar"></div>

</template>

日历加载（在 Aurelia 的 attach() 内置函数中）但不显示任何事件。如果我将事件数据直接粘贴到实例化中（将 eventSources: 更改为 events: 后跟 JSON 数据），它可以工作。

JSON 源正在输出格式正确的 JSON 数据：

JSON 源数据

[{
  "id": "3596",
  "title": "Feriado Local- No hay clases.",
  "start": "2016-11-02",
  "end": "2016-11-02"
}, {
  "id": "3933",
  "title": "Moms In Prayer",
  "start": "2016-11-02T07:30:00",
  "end": "2016-11-02T08:30:00"
}, {
  "id": "3826",
  "title": "Early Release Day",
  "start": "2016-11-02T12:30:00",
  "end": "2016-11-02T13:30:00"
}, {
  "id": "3827",
  "title": "Parent Seminar",
  "start": "2016-11-03",
  "end": "2016-11-03"
}, {
  "id": "3593",
  "title": "Salida Temprano. Reporte de Progreso.",
  "start": "2016-11-03",
  "end": "2016-11-03"
}, {
  "id": "3568",
  "title": "Fiesta \"Ya S\u00e9 Multiplicar\"",
  "start": "2016-11-04",
  "end": "2016-11-04"
}, {
  "id": "3969",
  "title": "Thrive",
  "start": "2016-11-04T18:30:00",
  "end": "2016-11-04T21:00:00"
}, {
  "id": "3949",
  "title": "No classes - Day After Presidential Elections",
  "start": "2016-11-07",
  "end": "2016-11-07"
}, {
  "id": "3594",
  "title": "Entrega de Reporte de Progreso.",
  "start": "2016-11-07",
  "end": "2016-11-07"
}, {
  "id": "3828",
  "title": "Talent Show Auditions",
  "start": "2016-11-08T14:30:00",
  "end": "2016-11-08T16:00:00"
}, {
  "id": "3954",
  "title": "National Honor Society Induction",
  "start": "2016-11-08T18:30:00",
  "end": "2016-11-08T19:30:00"
}, {
  "id": "3600",
  "title": "\u00daltimo Seminario para Padres y Madres del a\u00f1o 2015",
  "start": "2016-11-10",
  "end": "2016-11-10"
}, {
  "id": "3829",
  "title": "Talent Show Auditions",
  "start": "2016-11-10T14:30:00",
  "end": "2016-11-10T16:00:00"
}, {
  "id": "3599",
  "title": "D\u00eda de \u00c9nfasis Espiritual",
  "start": "2016-11-11",
  "end": "2016-11-11"
}]

有没有办法调试FullCalendar的事件数据，看看是否成功加载了json数据？

Answer 1

最终，解决方案是改变：

eventSources: [
  {
    url: 'http://mydomain/pub/api_events_aurelia.php',
    dataType: 'jsonp',
    color: 'yellow',
    textColor: 'black'
  }
],

到：

events: 'http://mydomain/pub/api_events_aurelia.php',

我仍然不知道为什么顶部起作用而底部不起作用，但是我的问题已经解决了。