title: Full Calendar does not refresh unless prev/next button is clicked
body: <p>I have been trying to get the calendar to show events based on the selection of the teacher, the events are stored in the database and they are displaying correctly.</p>
  
  <p><strong>ISSUE: It is regarding full calendar itself, the correct event loads for a selected teacher ONLY WHEN I CLICK the PREV/NEXT button. And these prev and next buttons are for changing the month or the week.
  IS there anyway to ESCAPE THIS ?</strong></p>
  
  <p>The select element in html which selects the teachers is as such:-</p>
  
  <pre><code>      &lt;select id="teachermale" name="teachermale"&gt;
          &lt;option selected disabled&gt;&lt;/option&gt;
          &lt;option value="Mohamed Adil"&gt;Mohamed Adil&lt;/option&gt;
          &lt;option value="Sherif Reda"&gt;Sherif Reda&lt;/option&gt; 
          &lt;option value="Mohamed Shahban"&gt;Mohamed Shahban&lt;/option&gt; 
          &lt;option value="Abdullah al Haiti"&gt;Abdullah al Haiti&lt;/option&gt;
          &lt;option value="Salah"&gt;Salah&lt;/option&gt;
          &lt;option value="Ahmed Nabil"&gt;Ahmed Nabil&lt;/option&gt;  
          &lt;option value="Abdul Tawab"&gt;Abdul Tawab&lt;/option&gt;
          &lt;option value="Mahmoud Mahmoud"&gt;Mahmoud Mahmoud&lt;/option&gt;  
          &lt;option value="Ahmed Ghanim"&gt;Ahmed Ghanim&lt;/option&gt;
        &lt;/select&gt;
  </code></pre>
  
  <p>And the full calendar is initiated as show below. I have left out the <code>$(function</code> part and pasted the part of code which loads the calendar events.</p>
  
  <pre><code>     $("#teachermale").on("change", function(){
          $("#calendar").fullCalendar("rerenderEvents");
        });
  
        var calendar = $('#calendar').fullCalendar({
         editable: true,
         header: {
          left: 'prev,next today',
          center: 'title',
          right: 'month,agendaWeek,agendaDay'
         },
        defaultView:'agendaWeek',
        timeFormat: 'h:mm',
        displayEventEnd :true,
        eventLimit: true,
        // events: 'events.php',
        events: function( start, end, timezone, callback ) {
  
           $.ajax({
                    url: 'events.php',
                    dataType: 'json',
                    data: {
                        start: start.unix(),
                        end: end.unix(),
                        teacher: $('#teachermale').val(),
                    },
                    success: function(doc) {
                      console.log(doc);
                        var events = [];
                        $(doc).find('event').each(function() {
                            events.push({
                                title: $(this).attr('title'),
                                start: $(this).attr('start')
                            });
                        });
  
                    callback(doc);
  
                    }
              });
  
  
  
        }
  </code></pre>