title: Add more events to fullcalendar when dragging starts
body: <p>I need to be able to let users move some events around on my fullcalendar. And I want to go to server and fetch counterparties' busy times and display them as background events on the calendar when the dragging is going on. However, when I call .fullcalendar('renderEvents', [...]) while the dragging is happening, the dragging mechanism within fullcalendar breaks and stops.</p>
  
  <p>Is there a way to either add events without breaking dragging or some other way highlight busy times that have to be retrieved with ajax call?</p>
  
  <p>The example is here: <a href="https://jsbin.com/qikiganelu/1/edit?js,output" rel="noreferrer">https://jsbin.com/qikiganelu/1/edit?js,output</a>. Try dragging 'Meeting with Bob'.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() { // document ready
    
    $('#calendar').fullCalendar({
      header: {
        left: '',
        center: '',
        right: ''
      },
      defaultView: 'agenda',
      duration: {days: 2},
      allDaySlot: false,
      defaultDate: '2017-04-27',
      minTime: '9:00',
      maxTime: '17:00',
      events: [
        {
          title: 'Keynote',
          start: '2017-04-27T09:00',
          end: '2017-04-27T11:00',
          editable: false,
          color: "gray",
        },
        {
          title: 'Meeting with Bob',
          start: '2017-04-27T12:30',
          end: '2017-04-27T13:00',
          editable: true,
        },
      ],
      eventDragStart: function(event, jsEvent, ui, view){
        // fetch Bob's busy times and add them as background events
        var busyTimes = [
          {
            start: '2017-04-27T14:00',
            end: '2017-04-27T16:00',
            rendering: 'background',
          },
          {
            start: '2017-04-28T9:00',
            end: '2017-04-28T12:00',
            rendering: 'background',
          }
        ];
        $('#calendar').fullCalendar('renderEvents', busyTimes);
      },
    });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 40px 10px;
    padding: 0;
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    font-size: 14px;
  }
  
  #calendar {
    max-width: 900px;
    margin: 0 auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset='utf-8' /&gt;
  &lt;link href='https://fullcalendar.io/js/fullcalendar-3.4.0/fullcalendar.css' rel='stylesheet' /&gt;
  &lt;link href='https://fullcalendar.io/js/fullcalendar-3.4.0/fullcalendar.print.css' rel='stylesheet' media='print' /&gt;
  &lt;script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js'&gt;&lt;/script&gt;
  &lt;script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'&gt;&lt;/script&gt;
  &lt;script src='https://fullcalendar.io/js/fullcalendar-3.4.0/fullcalendar.js'&gt;&lt;/script&gt;
  
  &lt;!-- the code from the JavaScript tab will go here --&gt;
  
  
  &lt;!-- the code from the CSS tab will go here --&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
   &lt;div id='calendar'&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>