How to reload FullCalendar V5 events after change of a select

Question

i use FullCalendar with a database with the information of events, besides the normal info in the database, i have one column that is the doctor and in other is the city, so i have working my fullcalendar 5 with MVC php mysql. I made a lot of changes to my calendar and is working.

I add two select in the top of calendar, outside the calendar, and what i like is that when i change the select (ex. choose one doctor) the calendar have a refetchEvents() and of course show only the events from these doctor, and when i put in blank the select show alls events, or if i choose another doctor show me his only events.

In some point, my code is working, only that the calendar don't refresh, i mean calendar.refetchEvents(); do nothing.

these are my code in js:

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);
        };
    };

and these are my controller function:

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();
    }

And these are my model function:

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);
    }

So when i try, i see that in my console works fine the (php ajax), so when i start the calendar show me all events, of course the select option is in blank, and when i change the select (ex. doctor), in the console show me the doctors events, but in the calendar don't reload with the new data. So in the imagen as you can see in one selecction bring all data, and in the other selection (when i change the select, choose one doctor) brings me only his events, so these are less events, but only i can see in the console, the calendar do nothing to refresh.

I add the images of the code, the code that i wrote before (Controller):

I add the images of the code, the code that i wrote before (JS):

The funny thing is that, if i ignore the selects, and modify my code onlive (Controller) the calendar do refresh, so i think my problem is in my JS. i think has something to do with:

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

So, any ideas, suggestions ? i will be eternal grateful. Thanks in advance !!!

Answer 1

I Fixed changing the JS code like these:

//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);
    };
//};