Recharger l'événement FullCalendar V5 après la mise à jour des options de sélection

Question

J'utilise FullCalendar avec une base de données qui contient des informations sur les événements. Outre les informations normales dans la base de données, j'ai une colonne pour les médecins et une autre pour la ville. Je travaille donc sur mon calendrier complet 5 en utilisant MVC php mysql. J'ai apporté beaucoup de modifications au calendrier et ça fonctionne.

J'ai ajouté deux sélections en haut du calendrier, en dehors du calendrier, ce que j'aime c'est que lorsque je change la sélection (par exemple sélectionner un médecin) le calendrier a un refetchEvents() qui n'affiche bien sûr que les événements de ces médecins, Quand je laisse ce champ vide, je choisis d'afficher tous les événements, ou si je sélectionne un autre médecin, d'afficher ses seuls événements.

À un moment donné, mon code fonctionne bien, c'est juste que le calendrier ne s'actualise pas, je veux dire Calendar.refetchEvents();

Voici mes codes 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);
        };
    };

Voici les fonctions de mon contrôleur :

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

Voici mes fonctions de modèle :

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

Donc quand j'essaye, je vois que dans ma console ça marche bien (php ajax), donc quand je démarre le calendrier tous les événements sont affichés, et bien sûr l'option de sélection est vide, quand je change la sélection (ex.docteur) , M'affiche les événements du médecin dans la console mais ne recharge pas les nouvelles données dans le calendrier. Donc dans l'image comme vous pouvez le voir dans une sélection apporte toutes les données et dans l'autre sélection (quand je change la sélection, sélectionne un médecin) elle m'apporte uniquement ses événements, donc il y a moins d'événements, mais seulement si je peux le faire dans la console, le calendrier n'effectue aucune opération d'actualisation.

Image du code que j'ai ajouté, le code que j'ai écrit auparavant (contrôleur) :

J'ai ajouté une image du code que j'ai écrit plus tôt (JS) :

Fait intéressant, si j'ignore la sélection et modifie mon code (contrôleur) en ligne, le calendrier s'actualise, donc je pense que mon problème vient de mon JS. Je pense que cela a quelque chose à voir avec :

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

Alors, avez-vous des idées ou des suggestions ? Je serai éternellement reconnaissant. Merci d'avance! ! !

Answer 1

J'ai corrigé la modification du code JS comme suit :

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