Блог

Я добавил элемент управления 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 attached()), но события не отображаются. Если я вставлю данные события непосредственно в экземпляр (изменив 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 Su00e9 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 au00f1o 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": "Du00eda de u00c9nfasis Espiritual",
  "start": "2016-11-11",
  "end": "2016-11-11"
}]
  

Есть ли способ отладить данные событий FullCalendar, чтобы узнать, успешно ли они загрузили данные json?

В конце концов, решение состояло в том, чтобы изменить:

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

Для:

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

Я до сих пор не знаю, почему верхняя часть работала, а нижняя — нет, но моя проблема решена.