0

I am using the FullCalendar plug in to provide a calendar to the users of my web application. Within FullCalendar, I am allowing the user to pick between the following views:

right: 'agendaWeek,agendaDay,basicWeek,month'

My problem applies currently only when accessing the month view. On a busy month, the amount of JSON being return comes up to 5 MB 700KB.

eventSources: [
   {
      url: 'calendar.php',
      type: 'POST',
      data: {
         emp_id: emp_id
      },
    }
]

The fetching of this large chunk of data isn't an issue- it doesn't take longer than 1.5 seconds 1 second.

It is the rendering that is problematic- it can take upwards of 10 seconds during which the UI is blocked and the page appears unresponsive (for obvious reasons- the single threaded nature of JS).

I then looked in to Web Workers as a potential solution (I am okay with solutions that work only in newer browsers). However, that is not a simple fix either because any use of Web Workers is probably best done at the plugin (FullCalendar) level as opposed to when I create a calendar instance.

I have also looked at this answer. My evaluation of the suggested solutions:

  1. Break up the server response into multiple requests: probably doesn't apply here- this is the monthly view and users need to be able to see all the events in a given month.
  2. Break up the parsing into multiple pieces: probably best done at the FullCalendar level?
  3. Send the response off to a web worker and parse it in a web worker (doesn't work in older browsers).

I realize that parsing a large amount of JSON data and rendering it is time consuming. However, what I'd like to be able to do at the very least is to have the rest of the page responsive while events are rendered.

What are some reasonable ways of remedying the situation?

Edit

I completely overlooked the fact that I wasn't filtering the events I needed at the SQL level. I am doing so now and the data coming in is about 700kb as opposed to 5mb. However, the page is still not as responsive at it should be.

Community
  • 1
  • 1
karancan
  • 2,152
  • 4
  • 23
  • 35
  • Before you dwelve into possibl3e solutions, I'd like to say, that a 5MB JSON Response for a calendar, makes no sense. I have a month retrieval in a software as well, and even when I have all days, every hours booked, the JSON is still nothing compared to that. I would say you are probably retrieving information you don't need, and you should create a filter in PHP? – André Catita Feb 20 '14 at 17:54
  • So this is a view where a particular group of users are responsible for coordinating the events of all other users and so it is not loading events for just one other user but for about 40 others users. – karancan Feb 20 '14 at 23:20
  • @AndréCatita I have edited the question- thoughts? – karancan Feb 24 '14 at 17:59

1 Answers1

1

Like André Catita said you should create a filter, probably you are returning the full year of events...guessing here...

If you send previously a date limit ( month wide ) like this:

eventSources: [
 {
    url: 'calendar.php',
    type: 'POST',
    data: {emp_id: emp_id, start: startdate, end: enddate},
  }
]

You would be able to set the time range in wich your events should be returned, ofc server-side you have to get startdate and enddate and fetch the events accordingly.

Check this link to give you a hint of what i'm talking about:

events (as a json feed), start end parameters unix timestamp, are different if I change my OS time zone

Community
  • 1
  • 1
Henrique C.
  • 948
  • 1
  • 14
  • 36
  • Ok super silly on my part- I am now filtering events at the SQL level too. FYI, I don't need to send my own `start` and `end` parameters. FullCalendar add's these to the AJAX request. Thanks :) – karancan Feb 24 '14 at 17:44
  • I know and i knew you would get there ;) – Henrique C. Feb 25 '14 at 08:53