来自 JSON 的 FullCalendar 加载事件在 viewRender 上提供

Question

FullCalendar v2.2.5，我想使用我的 JSON 生成脚本仅为日历的可见区域提取数据，如其他几个问题中所述。

$(document).ready(function() {
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,basicWeek,basicDay',
            defaultAllDay: true,
        },
        lazyFetching: false,
        defaultDate: '2015-01-06',
        editable: false,
        eventLimit: 10, 
        weekMode: 'liquid',
        dayPopoverFormat: 'DD/MM/YYYY',

        //events: {
        //          url: 'instant-tools.cgi',
        //          type: 'POST',
        //          data: {
        //              events: 1,
        //              pending: 1,
        //              from: '2014-01-01',
        //              to: '2016-12-31',
        //          }
        //      },

        viewRender: function(view, element) {
            var events_slice = new Object();
            events_slice.eventSources = [
                {
                    url: 'instant-tools.cgi',
                    type: 'POST',
                    data: { events: 1, pending: 1, from: '2014-01-01', to: '2016-12-31' }
                }
            ];

            $('#calendar').fullCalendar('addEventSource', events_slice);

            //$('#calendar').fullCalendar('renderEvents');
        },

        eventClick: function(calEvent, jsEvent, view) {
            alert(calEvent.title + "n" + calEvent.start.format('DD/MM/YYYY') + " to " + calEvent.end.format('DD/MM/YYYY'));
        },
    });
});

注释掉的 events 定义有效（当我使用它时），但 viewRender 定义无效。在你问之前 viewRender 确实被触发了。我在控制台中没有收到任何错误，也没有显示任何事件。我的脚本根本没有被调用。我知道我现在已经对日期进行了硬编码，但是一旦我确认我得到了类似的结果，我将使用 view.intervalStart 和 view.intervalEnd。有 $('#calendar').fullCalendar('renderEvents'); 没有区别，切换 lazyFetching 也没有区别。不是 JS 编码员，所以我希望我只是在某个地方犯傻。

Answer 1

如果属性您需要调用函数

$(document).ready(function() {
  $('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,basicWeek,basicDay',
      defaultAllDay: true,
    },
    lazyFetching: false,
    defaultDate: '$today',
    editable: false,
    eventLimit: 10,
    weekMode: 'liquid',
    dayPopoverFormat: 'DD/MM/YYYY',

    events: function(start, end, timezone, callback) {
      $.ajax({
        url: 'instant-tools.cgi',
        data: {
          events: 1,
          pending: 1,
          from: '2014-01-01',
          to: '2016-12-31',
        },
        success: function(doc) {
          var obj = jQuery.parseJSON(doc);
          var events = [];
          $.each(obj, function(index, value) {

            events.push({
              id: value['id'],
              //all data
            });
            //console.log(value)
          });
          callback(events);
        },
        error: function(e, x, y) {
          console.log(e);
          console.log(x);
          console.log(y);
        }
      });
    },

    eventClick: function(calEvent, jsEvent, view) {
      alert(calEvent.title + "n" + calEvent.start.format('DD/MM/YYYY') + " to " + calEvent.end.format('DD/MM/YYYY'));
    },
  });
});

来自 JSON 的 FullCalendar 加载事件在 viewRender 上提供

FullCalendar load events from JSON feed on viewRender

javascript

jquery

json

fullcalendar