Muat semula acara FullCalendar V5 selepas mengemas kini pilihan pemilihan

Question

Saya menggunakan FullCalendar dengan pangkalan data yang mengandungi maklumat acara, selain daripada maklumat biasa dalam pangkalan data, saya mempunyai lajur untuk doktor dan satu lagi untuk bandar, jadi saya menggunakan kalendar penuh 5 saya menggunakan MVC php mysql. Saya membuat banyak perubahan pada kalendar dan ia berfungsi.

Saya menambah dua pilihan di bahagian atas kalendar, di luar kalendar, perkara yang saya suka ialah apabila saya menukar pilihan (cth. pilih doktor) kalendar mempunyai refetchEvents() yang sudah tentu hanya menunjukkan acara daripada doktor tersebut, apabila saya Apabila saya membiarkannya kosong, saya memilih untuk menunjukkan semua acara, atau jika saya memilih doktor lain, menunjukkan satu-satunya peristiwanya.

Pada satu ketika, kod saya berfungsi dengan baik, cuma kalendar tidak dimuat semula, maksud saya calendar.refetchEvents();

Ini adalah kod js saya:

sedegeneral.addEventListener("click", clicksede);
    function clicksede(){
    sedegeneral.addEventListener("change", clicksede2);
        function clicksede2(){
        const sedegeneral1 = document.getElementById('sedegeneral').value;
        const doctorseleccionado1 = document.getElementById('doctorseleccionado').value;
        //alert("Alert 1");
        //calendar.refetchEvents();
        //alert("Estamos a que el doc es: "+doctorseleccionado1+" Y la sede escogida es: "+sedegeneral1);
            const url = base_url + 'Home/listar';
            const http = new XMLHttpRequest();
            http.open("POST", url, true);
            http.send(new FormData(frmflt));
            http.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    console.log(this.responseText);
                    const res = JSON.parse(this.responseText);
                     Swal.fire(
                         'Avisos?',
                         res.msg,
                         res.tipo
                     )
                    if (res.estado) {
                        eventSource.remove()
                        //calendar.getEventSources()
                        calendar.addEventSource(res)
                        calendar.refetchEvents();
                        calendar.render();
                    }
                }
            }

        sedegeneral.removeEventListener("change", clicksede2);
        };
    };

Ini adalah fungsi pengawal saya:

public function listar()
    {
        $doctor = $_POST['doctorselecionado'];
        //$doctor = '';
        //$doctor = 'guti';
        $sede = $_POST['sedegeneral'];
        //$sede =  '';
        //$sede =  'dentalsoftweb';
        //$sede =  'guti';

        $data = $this->model->getEventos($doctor,$sede);
        echo json_encode($data);
        die();
    }

Ini adalah fungsi model saya:

public function getEventos($doctor,$sede)
    {
        $where_sql = ''; 
        //if(!empty($_GET['start']) && !empty($_GET['end'])){$where_sql .= " WHERE start BETWEEN '".$_GET['start']."' AND '".$_GET['end']."' ";}
        if(!empty($_GET['start']) && !empty($_GET['end'])){$where_sql .= " AND start BETWEEN '".$_GET['start']."' AND '".$_GET['end']."' ";}

        //$sql = "SELECT id,title, CONCAT(start,'T',startTime) as start, CONCAT(start,'T',endTime) as end, color, duracioncita, finalidad, resultado, observaciones, start as fechacita, startTime as horacita FROM evento $where_sql";
        $sql = "SELECT id,title, CONCAT(start,'T',startTime) as start, CONCAT(start,'T',endTime) as end, color, duracioncita, finalidad, resultado, observaciones, start as fechacita, startTime as horacita FROM evento WHERE lastuser LIKE '%$doctor%' AND lastusermodif LIKE '%$sede%' $where_sql";
        $array = array($doctor);
        return $this->selectAll($sql, $array);
    }

Jadi apabila saya mencuba, saya melihat bahawa dalam konsol saya ia berfungsi dengan baik (php ajax), jadi apabila saya memulakan kalendar semua acara ditunjukkan, dan sudah tentu pilihan pemilihan kosong, apabila saya menukar pemilihan (cth.doctor) , Menunjukkan saya acara doktor dalam konsol tetapi tidak memuatkan semula data baharu dalam kalendar. Jadi dalam imej seperti yang anda boleh lihat dalam satu pilihan membawa semua data dan dalam pilihan lain (apabila saya menukar pemilihan, pilih doktor) ia membawa saya hanya acaranya, jadi terdapat lebih sedikit acara, tetapi hanya jika saya boleh lakukan dalam konsol, kalendar tidak melakukan sebarang operasi muat semula.

Imej kod yang saya tambah, kod yang saya tulis sebelum ini (pengawal):

Saya menambah imej kod yang saya tulis sebelum ini (JS):

Menariknya, jika saya mengabaikan pemilihan dan mengubah suai kod (pengawal) saya dalam talian, kalendar akan disegarkan, jadi saya rasa masalah saya adalah dalam JS saya. Saya rasa ia ada kaitan dengan:

eventSource.remove()
calendar.getEventSources()
calendar.addEventSource(res)
calendar.refetchEvents();

Jadi, adakah anda mempunyai sebarang pendapat atau cadangan? Saya akan sentiasa bersyukur. Terima kasih terlebih dahulu! ! !

Answer 1

Saya tetap menukar kod JS seperti berikut:

//sedegeneral.addEventListener("click", clicksede);
//function clicksede(){
sedegeneral.addEventListener("change", clicksede2);
    function clicksede2(){
    const sedegeneral1 = document.getElementById('sedegeneral').value;
    const doctorseleccionado1 = document.getElementById('doctorseleccionado').value;
        const url = base_url + 'Home/listar';
        const http = new XMLHttpRequest();
        http.open("POST", url, true);
        http.send(new FormData(frmflt));
        http.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                console.log(this.responseText);
                const ressede = JSON.parse(this.responseText);
                 Swal.fire(
                     'Filtrando Sede '+sedegeneral1+' y el doctor '+doctorseleccionado1,
                     //ressede.msg,
                     //ressede.tipo
                 )
                    calendar.removeAllEvents();
                    calendar.addEventSource(ressede)
            }
        }
    sedegeneral.removeEventListener("change", clicksede2);
    };
//};