Laden Sie das FullCalendar V5-Ereignis neu, nachdem Sie die Auswahloptionen aktualisiert haben

Question

Ich verwende FullCalendar mit einer Datenbank, die Ereignisinformationen enthält. Abgesehen von den normalen Informationen in der Datenbank habe ich eine Spalte für Ärzte und eine weitere für Städte, daher arbeite ich an meinem FullCalendar 5 mit MVC PHP MySQL. Ich habe viele Änderungen am Kalender vorgenommen und er funktioniert.

Ich habe oben im Kalender, außerhalb des Kalenders, zwei Auswahlmöglichkeiten hinzugefügt. Was mir gefällt, ist, dass der Kalender, wenn ich die Auswahl ändere (z. B. einen Arzt auswählen), über eine refetchEvents() verfügt, die natürlich nur die Ereignisse dieser Ärzte anzeigt. Wenn ich das Feld leer lasse, wähle ich, alle Ereignisse anzuzeigen, oder, wenn ich einen anderen Arzt auswähle, nur seine Ereignisse anzuzeigen.

Irgendwann funktioniert mein Code einwandfrei, nur der Kalender wird nicht aktualisiert, ich meine, Calendar.refetchEvents(); führt nichts aus.

Das sind meine js-Codes:

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

Das sind meine Controller-Funktionen:

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

Das sind meine Modellfunktionen:

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

Wenn ich es also versuche, sehe ich, dass es in meiner Konsole einwandfrei funktioniert (PHP Ajax). Wenn ich also den Kalender starte, werden alle Ereignisse angezeigt, und natürlich ist die Auswahloption leer, wenn ich die Auswahl ändere (z. B. Arzt). , Zeigt mir Arzttermine in der Konsole an, lädt aber keine neuen Daten in den Kalender. Wie Sie im Bild sehen können, bringt mir eine Auswahl alle Daten und in der anderen Auswahl (wenn ich die Auswahl ändere, wähle einen Arzt aus) nur seine Ereignisse, es gibt also weniger Ereignisse, aber nur, wenn ich das kann Wenn Sie dies in der Konsole tun, führt der Kalender keine Aktualisierungsvorgänge durch.

Bild des Codes, den ich hinzugefügt habe, des Codes, den ich zuvor geschrieben habe (Controller):

Ich habe ein Bild des Codes hinzugefügt, den ich zuvor geschrieben habe (JS):

Interessanterweise wird der Kalender aktualisiert, wenn ich die Auswahl ignoriere und meinen Code (Controller) online ändere, sodass ich denke, dass mein Problem in meinem JS liegt. Ich denke, es hat etwas damit zu tun:

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

Haben Sie irgendwelche Gedanken oder Vorschläge? Ich werde für immer dankbar sein. Dank im Voraus! ! !

Answer 1

我修复了更改 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;
        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);
    };
//};