Fullcalendar refetchEventsが機能しない（AJAX）

Question

btn_insertボタンを押すと、フォームデータがDBに保存されますが、データはカレンダー画面で更新されません。 .fullCalendar（ 'refetchEvents'）を使用していますが、動作しません。ページをリロードすると、カレンダーデータが更新されます。コントローラーとモデルにはエラーはありませんが、必要に応じて入れます。私は問題がJavascriptにあると思う。あなたが私を助けることができれば幸いです。

PD：私の英語は非常に良いではありませんが、私は2つの方法がありますが

コントローラ

<?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

を理解することを願ってあなたはできるthis：

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を参照してください）あなたはJS変数を経由してロードされた静的なイベントのリストを（）持っているので、現在、 "refetchEventsは" 動作しません。イベントをロードするサーバースクリプトへの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によって提供される "start"および "end"日付パラメータを受け入れ、SQLで使用して現在の時間だけイベントを返すようにする必要がありますカレンダーに表示される期間。通常、データベースに多くのイベントが発生すると、今のようにすべてのイベントを一度にロードするよりも効率的です。私の例では、geteventos（）にajaxリクエストの一部としてこれらの日付を送信するコードをすでに追加しています。