FullCalendar not showing events from JSON data

Question

I've added the FullCalendar control to an Aurelia project and the calendar displays, but does not show any events from my JSON source (cross-domain).

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>

The calendar loads (within Aurelia's attached() built-in function) but no events are displayed. If I paste the event data directly into the instantiation (changing eventSources: to events: followed by the JSON data), it works.

The JSON source is outputting properly-formatted JSON data:

JSON source data

[{
  "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"
}]

Is there a way to debug FullCalendar's event data to see whether it has successfully loaded the json data?

The json seems valid. Are you sure you're on a view that should have an event? Check the developer tools on the Network tab and check the request to the server. Do you have an error? Did the request correctly returned the list of events? If you copy the response and paste it on JsonFormater is it a valid JSON? — Luís Cruz

LStarky LStarky · Accepted Answer · 2016-10-11T20:09:21

In the end, the solution was to change:

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

to:

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

I still don't know why the top worked and the bottom didn't, but my problem is solved.

FullCalendar not showing events from JSON data

1 Answers