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（）的代码。