CODEWITHSUNDEEP
javascriptjqueryjsonfullcalendar
Recct
Recct

Reputation: 923

FullCalendar load events from JSON feed on viewRender

FullCalendar v2.2.5, I want to use my JSON generating script to pull data only for the visible area of the calendar as mentioned in a few other questions. 

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

The commented out events definition works (when I use it) but the viewRender one does not. Before you ask viewRender does get triggered. I get no errors in the console and no events displayed. My script is not called at all. I know I have the dates hardcoded right now but I will use view.intervalStart and view.intervalEnd once I verify I get a similar result. Having $('#calendar').fullCalendar('renderEvents'); in there makes no difference, also toggling lazyFetching does not make a difference. Not a JS coder so I hope I'm just being silly somewhere.

Upvotes: 4

Views: 8604

Answers (1)

eyalb
eyalb

Reputation: 3022

in the event property you need to call the function

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

Upvotes: 6

Related Questions