Question

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

问题：关于完整日历本身，只有当我点击PREV / NEXT按钮时，才会为所选教师加载正确的事件。这些上下按钮用于更改月份或周。无论如何，还有ESCAPE吗？

html中选择教师的select元素如下： -

      <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);
      }
});

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

2 个答案: