FullCalendar从viewRender上的JSON feed加载事件

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'));
    },
  });
});