How do I pass current date range from Fullcalendar to the JSON function which retrieves data from MySQL

Question

I use fullcalendar eventsources function, to get events data from db:

eventSources: getSources()

where getSources is

getSources(){
 var mysources = {
   mysourceone:{
                url: YOUR URL TO GET JSON,
                type: 'POST', 
                data:{
                //SOME DATA YOU MIGHT PASS                   },
                 cache: false,
                 color: '#C1272D',
                 textColor: 'white'
                 }
              }
  return [mysources.mysourceone];
}

My question is, how do I pass currently selected date range from fullcalendar to the getSources function?

I would like to retrieve from db only relevant data to selected dates! Currently this function returns data from db regardless of selected date range.

Answer 1

Your function getSources() must return an array of functions, rather than literal data. Each of those functions will be called with these parameters:

yourfunction( start, end, timezone, callback )

Fullcalendar will fill in the dates you're looking for in start and end.

Tip: if you limit your search in DB to start and end, you will miss events that start before the start, but end somewhere between start and end. E.g. you want to display part of last week's event in this week, if the event stretches across the weeks' borders. So I actually expand the period between start and end by subtracting 2 months from start and adding 2 months to end. This way you can have events up to two months long which are guaranteed to be visible.