title: FullCalendar: event source returning large amount of data causing UI blocking
body: <p>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:</p>
  
  <p><code>
  right: 'agendaWeek,agendaDay,basicWeek,month'
  </code></p>
  
  <p>My problem applies currently only when accessing the <code>month</code> view. On a busy month, the amount of JSON being return comes up to <s>5 MB</s> <strong>700KB</strong>.</p>
  
  <pre><code>eventSources: [
     {
        url: 'calendar.php',
        type: 'POST',
        data: {
           emp_id: emp_id
        },
      }
  ]
  </code></pre>
  
  <p>The fetching of this large chunk of data isn't an issue- it doesn't take longer than <s>1.5 seconds</s> <strong>1 second</strong>.</p>
  
  <h3><strong>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).</strong></h3>
  
  <p>I then looked in to <a href="http://www.html5rocks.com/en/tutorials/workers/basics/" rel="nofollow noreferrer">Web Workers</a> 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. </p>
  
  <p><a href="https://stackoverflow.com/a/10345558/1580608">I have also looked at this answer</a>. My evaluation of the suggested solutions:</p>
  
  <ol>
  <li><em>Break up the server response into multiple requests</em>: probably doesn't apply here- this is the <code>monthly</code> view and users need to be able to see all the events in a given month.</li>
  <li><em>Break up the parsing into multiple pieces</em>: probably best done at the FullCalendar level?</li>
  <li><em>Send the response off to a web worker and parse it in a web worker (doesn't work in older browsers)</em>.</li>
  </ol>
  
  <h3><strong>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.</strong></h3>
  
  <p>What are some reasonable ways of remedying the situation?</p>
  
  <hr>
  
  <h1>Edit</h1>
  
  <p>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 <strong>700kb</strong> as opposed to <strong>5mb</strong>. However, the page is still not as responsive at it should be.</p>