除非单击上一个/下一个按钮，否则“完整日历”不会刷新

Question

我一直在尝试让日历根据老师的选择显示事件，事件存储在数据库中并且它们正确显示。

问题：这是关于完整日历本身的，只有当我单击"上一个/下一个"按钮时，才会为所选教师加载正确的事件。这些上一个和下一个按钮用于更改月份或星期。有没有办法逃脱这个？

html 中用于选择教师的选择元素是这样的：-

      <select id="teachermale" name="teachermale">
        <option selected disabled></option>
        <option value="Mohamed Adil">Mohamed Adil</option>
        <option value="Sherif Reda">Sherif Reda</option> 
        <option value="Mohamed Shahban">Mohamed Shahban</option> 
        <option value="Abdullah al Haiti">Abdullah al Haiti</option>
        <option value="Salah">Salah</option>
        <option value="Ahmed Nabil">Ahmed Nabil</option>  
        <option value="Abdul Tawab">Abdul Tawab</option>
        <option value="Mahmoud Mahmoud">Mahmoud Mahmoud</option>  
        <option value="Ahmed Ghanim">Ahmed Ghanim</option>
      </select>

并且启动完整的日历，如下所示。我省略了$(function部分，并粘贴了加载日历事件的代码部分。

     $("#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);
                  }
            });

      }

Answer 1

更改

$("#teachermale").on("change", function(){
    $("#calendar").fullCalendar("rerenderEvents");
});

自

$("#teachermale").on("change", function(){
    $("#calendar").fullCalendar("refetchEvents");
});

Answer 2

尝试将rerenderEvents调用移动到 ajax 成功函数之后。

$.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')
          });
          //add rerender to after success 
          $("#calendar").fullCalendar("rerenderEvents");
      });
      callback(doc);
      }
});