首页 文章

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

提问于
浏览
0

我已将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的附加()内置函数中)但不显示任何事件 . 如果我将事件数据直接粘贴到实例化中(将eventSources:更改为事件:后跟JSON数据),它就可以正常工作 .

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

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

有没有办法调试FullCalendar的事件数据,看它是否已成功加载json数据?

1 回答

  • 0

    最后,解决方案是改变:

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

    至:

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

    我仍然不知道为什么顶部工作而底部没有,但我的问题解决了 .

相关问题