click prev/next and load new data

Question

I have fullcalendar working fine loading data using json from a flatfile(s).
I would like to load each months data from that months file on clicking prev/next.
Using ajax? events: function( start, end, callback ) addEventSource - removeEventSource? other?
Allow that jQuery is still a work in progress for me.

UPDATE: I have set: viewDisplay: function(view) { var next = view.title; alert(next); }, which gives me Month Year on clicking next/prev How to parse this to json-events.php

I tried [split next] events: "json-events.php?month=month", nope...

Answer 1

This is not using php, but you can change the AJAX call in getCalData() to do it. EventSource will be filled with the next data.

I hope this helps a little bit.

$(document).ready(function () {

var calendar = $('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'resourceMonth'
    },
    defaultView: 'resourceWeek',


    eventSources: [ getCalData() ],
    header: {
        left: 'prev,next today',
        center: 'title',
        right: ''
    },
    viewDisplay: function (view) {
        $('#calendar').fullCalendar('removeEvents');
        $('#calendar').fullCalendar('addEventSource', getCalData());
        $('#calendar').fullCalendar('rerenderEvents');
    }
  });
});


function getCalData() {

var source = [{}];
$.ajax({
    async: false,
    url: '/mysite/GetWeekData',
    data: { myParam: $('#calendar').fullCalendar('getView').visStart },
    success: function (data) {
        $(data).each(function () {
            source.push({
                title: $(this).attr('title'),
                start: $(this).attr('start'),
            });
        });
    },
    error: function () {
        alert('could not get the data');
    },
});
return source;
}

Answer 2

fullcalendar by default send 2 additional parameters when getting events, params[:start], params[:end] u can use them to return queried events between these 2 values

Answer 3

you can just add View Render property to configuration Object of fullcalendar

viewRender: function(view, element) {

 //console.debug("View Changed: ",view.start, view.end);

// events = loadevents();

 jQuery(nativeelement).fullCalendar('removeEvents');

 jQuery(nativeelement).fullCalendar('addEventSource', events);
 }

now you can load month by month. This syntax for angular2