Fullcalendar refetchEvents不起作用（AJAX）

Question

按下btn_insert按鈕會將表單數據保存到我的數據庫中，但數據在日曆屏幕上未更新。我使用.fullCalendar（'refetchEvents'），但它不起作用。如果我重新加載頁面，日曆數據會更新。控制器和模型沒有錯誤，但我也將它們放在需要的情況下;我認爲這個問題是在Javascript中發現的。我希望你能幫助我，謝謝大家。

PD：我的英語不是很好，我希望你能理解

控制器

<?php 

//We show the events 

public function geteventos() { 


    $r = $this->mCalendar->geteventos(); 
    echo json_encode($r); 
} 

public function insertar_cita() { 

//we insert the events 
    $data = array(
     'rut_usu' => $this->input->post('rut_usu'), 
     'rut_estu' => $this->input->post('rut_estu'), 
     'id_mot' => $this->input->post('id_mot'), 
     'fecha_ini' => $this->input->post('fecha_ini'), 
     'fecha_ter' => $this->input->post('fecha_ter'), 
    ); 

    $this->load->model('mCalendar'); 
    $this->mCalendar->insertar_cita($data); 
} 
?> 

型號

<?php 

public function geteventos() { 


//We show the events 

    $this->db->select('CONCAT(estudiantes.pnombre," ", estudiantes.apellido_pa," ", estudiantes.apellido_ma,", ",motivos_citas.descripcion_mot) As title ,citas.id_ci id, citas.fecha_ini start, citas.fecha_ter end'); 
    $this->db->from('citas'); 
    $this->db->join('estudiantes', 'citas.rut_estu = estudiantes.rut_estu'); 
    $this->db->join('motivos_citas', 'citas.id_mot = motivos_citas.id_mot'); 
    $this->db->join('usuarios', 'citas.rut_usu = usuarios.rut_usu'); 
//$this->db->where('usuarios.rut_usu=17811942'); 

    return $this->db->get()->result(); 
} 

public function insertar_cita($data) { 

    /we insert the events 
    $this->db->insert('citas', $data); 
} 
?> 

的Javascript

<script> 
    $(document).ready(function() { 

     //---------------------Full Calendar-------------------------------------- 
     $.post('<?php echo base_url(); ?>cCalendar/geteventos', 
       function (data) { 

        //alert(data); 

        $('#calendar').fullCalendar({ 

         header: { 
          left: 'prev,next today', 
          center: 'title', 
          right: 'month,agendaWeek,agendaDay,listMonth' 
         }, 

         defaultDate: new Date(), 
         navLinks: true, // can click day/week names to navigate views 
         businessHours: true, // display business hours 
         editable: true, 
         events: $.parseJSON(data), 

         dayClick: function (date, jsEvent, view) { 

          date_last_clicked = $(this); 
          $(this).css('background-color', '#bed7f3'); 
          $('#modal_registrar').modal(); 

         }, 

         minTime: "08:30:00", 
         maxTime: "23:00:00" 

        }); 


       }); 

     //--------------END fullcalendar----------------- 

     //---INSERT----------------------------- 

     $("#btn_insert").click(function() { 

      var rut_usu = $("#rut_usu").val(); 
      var rut_estu = $("#rut_estu").val(); 
      var id_mot = $("#id_mot").val(); 
      var fecha_ini = $("#fecha_ini").val(); 
      var fecha_ter = $("#fecha_ter").val(); 


      $.ajax({ 

       url: "<?php echo base_url(); ?>" + "cCalendar/insertar_cita/", 
       type: 'post', 
       data: {"rut_usu": rut_usu, "rut_estu": rut_estu, "id_mot": id_mot, "fecha_ini": fecha_ini, "fecha_ter": fecha_ter}, 

       success: function (response) { 

        $("#modal_registrar").modal('hide'); 
        $("#modal_confirmar").modal('show'); 
        $("#calendar").fullCalendar('refetchEvents'); 


       } 

      }); 

     }); 

     //---END Insert----------------------------- 

    }); 
</script> 

Answer 1

有兩種方法你可以做這個：

1）使用renderEvent方法在客戶端插入事件到fullCalendar。 （N.B.我不知道你的字段名稱是什麼，因爲它們沒有用英文命名，所以我猜到了，如果名稱與英文名稱不匹配，可以重新排列）。

$("#btn_insert").click(function() { 

    var rut_usu = $("#rut_usu").val(); 
    var rut_estu = $("#rut_estu").val(); 
    var id_mot = $("#id_mot").val(); 
    var fecha_ini = $("#fecha_ini").val(); 
    var fecha_ter = $("#fecha_ter").val(); 


    $.ajax({ 
    url: "<?php echo base_url(); ?>" + "cCalendar/insertar_cita/", 
    type: 'post', 
    data: {"rut_usu": rut_usu, "rut_estu": rut_estu, "id_mot": id_mot, "fecha_ini": fecha_ini, "fecha_ter": fecha_ter}, 
    success: function (response) { 
     $("#modal_registrar").modal('hide'); 
     $("#modal_confirmar").modal('show'); 
     //render an event object direct to the calendar 
     $("#calendar").fullCalendar('renderEvent', { "id", id_mot, "title": rut_usu + " " + rut_estu, "start": fecha_ini, "end", fecha_ter true); 
    } 
    }); 
}); 

見https://fullcalendar.io/docs/event_rendering/renderEvent/

2）目前， 「refetchEvents」 不工作，因爲你有一個靜態的事件列表（通過JS變量加載）。如果您將事件定義爲加載事件的服務器腳本的URL，那麼它將起作用。目前，fullCalendar沒有與服務器通話的信息​​來獲取事件。

你可以改變它這樣的，這是更爲fullCalendar如何期待您加載事件：

$('#calendar').fullCalendar({ 
    header: { 
    left: 'prev,next today', 
    center: 'title', 
    right: 'month,agendaWeek,agendaDay,listMonth' 
    }, 
    defaultDate: new Date(), 
    navLinks: true, // can click day/week names to navigate views 
    businessHours: true, // display business hours 
    editable: true, 
    events: function(start, end, timezone, callback) { 
    $.post('<?php echo base_url(); ?>cCalendar/geteventos', 
     { "start": start.format("YYYY-MM-DD"), "end": end.format("YYYY-MM-DD") }, 
     function (data) { 
     callback($.parseJSON(data)); 
    }); 
    }, 
    dayClick: function (date, jsEvent, view) { 
    date_last_clicked = $(this); 
    $(this).css('background-color', '#bed7f3'); 
    $('#modal_registrar').modal(); 
    }, 
    minTime: "08:30:00", 
    maxTime: "23:00:00" 
}); 

一旦你這樣做，在「btn_insert」的方法，你可以繼續使用refetchEvents，或者您仍然可以按照上面（1）中的建議進行更改，這樣可以避免使用「refetchEvents」導致的對服務器的額外ajax調用。

https://fullcalendar.io/docs/event_data/events_function/

N.B.理想情況下，當你這樣做時，你應該改變你的PHP geteventos（）方法，以便它接受fullCalendar提供的「開始」和「結束」日期參數，然後在SQL中使用它們，只返回當前時間的事件期間顯示在日曆上。通常情況下，一旦數據庫中有很多事件，這比一次加載它們更有效，就像現在一樣。在我的示例中，我已經添加了將這些日期作爲ajax請求的一部分發送給geteventos（）的代碼。