Question

按btn_insert按钮将表单数据保存到我的数据库，但数据不会在日历屏幕上更新。我使用.fullCalendar（＆＃39; refetchEvents＆＃39;）但它不起作用。如果我重新加载页面，则会更新日历数据。控制器和模型没有错误，但我也把它们放在必要的情况下;我认为问题出现在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。

（NB我不知道你的字段名称是什么，因为它们没有用英文命名，所以我猜到了。如果这些名字与英文名称不符，请道歉 - 你可以重新安排它们。） / p>

$("#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）中所建议的那样改变，这避免了由服务器引起的额外的ajax调用。使用“refetchEvents”。

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

N.B。理想情况下，当您执行此操作时，您应该更改PHP geteventos（）方法，以便它接受fullCalendar提供的“start”和“end”日期参数，然后在SQL中使用它们，以仅返回当前时间的事件期间显示在日历上。通常，一旦在数据库中有很多事件，这比立即加载所有事件更有效，就像现在一样。在我的示例中，我已经添加了代码，将这些日期作为ajax请求的一部分发送到geteventos（）。

Fullcalendar refetchEvents不起作用（AJAX）

1 个答案: