Fullcalendar - unable to cache JSON response from AJAX call

Question

I follow the Fullcalendar JSON Feed Caching question

What I'm trying to do is something similar. I have a full calendar (only month view is turned on, so lazy selection does not work, I think). And in the view of the month, I show information about user traffic. Therefore, when a user leaves for another month (for example, in November), an AJAX call is initiated, and he returns the attendance for this month, and if the user switches to another month (let them say in December), the attendance of this month will also be received.

The problem is that when the user returns again in November, the AJAX call is called again. So I have to get the data again. I try to avoid this as it takes 25 seconds to calculate attendance and return a JSON response. So, I am trying to cache the answer.

Here is a JSON snippet.

{  
   "attendance":[  
      {  
         "backgroundColor":"#f56954",
         "borderColor":"#f56954",
         "start":"2017-01-01",
         "end":"2017-01-01",
         "title":"Absent",
      },
      {  
         "backgroundColor":"#f56954",
         "borderColor":"#f56954",
         "start":"2017-01-02",
         "end":"2017-01-02",
         "title":"Absent",
      }
   ],
   "leaves":[  

   ]
}

I followed the answer provided in this question and made my caching events, but it does not work. I do not know why.

Here is my complete calendar code.

    /* initialize the calendar ----*/
    //Date for the calendar events (dummy data)
    var date = new Date();
    var d = date.getDate(),
      m = date.getMonth(),
      y = date.getFullYear();
    var dateofMonth = y + '-' + m + '-' + d;
    var date = dateofMonth;
    var events = [];
    var eventsCache = {}; //for caching

    var today = moment();
    var todayDate = today.format("YYYY-MM-DD");
    var tomorrow = today.add(1, 'days').format("YYYY-MM-DD");
    $('#calendar').fullCalendar({
      header: {
        left: 'prev,next',
        center: 'title',
        right: 'month'
      },
      buttonText: {
        today: 'today',
        month: 'month'
      },
      eventMouseover: function(data, event, view) {},
      events: function(start, end, timezone, callback) {

        //have we already cached this time?
        if (events.eventsCache && events.eventsCache[start.toString + "-" + end.toString]) {

          //if we already have this data, pass it to callback()
          callback(eventsCache[start.toString + "-" + end.toString]);
          return;
        }

        var date = $('#calendar').fullCalendar('getDate');
        dateofMonth = date._d;
        var post_url = "path_to_file.php";
        $.ajax({
          url: post_url,
          type: "POST",
          dataType: 'json',
          cache: true,
          data: {
            dateofMonth: dateofMonth,
            csrf_test_name: csrf_token
          },
          beforeSend: function(xhr) {},
          success: function(result) {
            var events = [];
            if (!events.eventsCache)
              events.eventsCache = {};

            //store your data
            eventsCache[start.toString + "-" + end.toString] = result;

            $.each(result.attendance, function(index, res) {
              var date = (res.start).split('-');
              events.push({

                title: res.title,
                allDay: true,

              });
            });

            callback(events);
          }
        });
      },
      editable: false,
      droppable: true, // this allows things to be dropped onto the calendar !!!
      eventClick: function(calEvent, jsEvent, view) {}
    });

Answer 1

Client-side caching is certainly possible if you performed it correctly. But I see several problems in your code that prevent it from working.

, events eventsCache .

var events = [];
var eventsCache = {};

, .

№1 - :

if (events.eventsCache && events.eventsCache[start.toString + "-" + end.toString]) {

, , , if . events.eventsCache eventsCache, , :

if (eventsCache[start.toString + "-" + end.toString]) {

eventsCache, .

№2 - success():

var events = [];

events , success(). , , .

№ 3 - :

if (!events.eventsCache)
  events.eventsCache = {};

, , . , eventsCache , . eventsCache.

.