更新選擇選項後重新載入 FullCalendar V5 事件
P粉195402292
P粉195402292 2024-03-27 11:51:32
0
1
507

我將 FullCalendar 與包含事件資訊的資料庫一起使用,除了資料庫中的正常資訊之外,我有一列是醫生,另一列是城市,所以我使用 MVC php mysql 工作我的 fullcalendar 5。我對日曆做了很多更改並且正在工作。

我在日曆頂部、日曆外部添加了兩個選擇,我喜歡的是,當我更改選擇(例如選擇一名醫生)時,日曆有一個refetchEvents(),當然僅顯示來自的事件這些醫生,當我將其置於空白時,請選擇顯示所有事件,或者如果我選擇另一位醫生,則顯示他唯一的事件。

在某些時候,我的程式碼可以正常工作,只是日曆不刷新,我的意思是calendar.refetchEvents();什麼都不做。

這些是我的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);
        };
    };

這些是我的控制器功能:

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

這些是我的模型函數:

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

所以當我嘗試時,我看到在我的控制台中工作正常(php ajax),所以當我啟動日曆時顯示所有事件,當然選擇選項是空白的,當我更改選擇時(例如.doctor ),在控制台中向我顯示醫生事件,但在日曆中不要重新載入新資料。因此,在圖像中,正如您在一個選擇中看到的那樣,帶來了所有數據,而在另一個選擇中(當我更改選擇時,選擇一位醫生)只給我帶來了他的事件,所以這些事件較少,但只有我可以在控制台,日曆不執行任何刷新操作。

我新增程式碼的圖像,我之前寫的程式碼(控制器):

我加入了程式碼的圖像,我之前寫的程式碼(JS):

有趣的是,如果我忽略選擇,並在線上修改我的程式碼(控制器),日曆就會刷新,所以我認為我的問題出在我的 JS 中。我認為與以下內容有關:

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

那麼,有什麼想法、建議嗎?我將永遠感激不已。先致謝! ! !

P粉195402292
P粉195402292

全部回覆(1)
P粉237125700

我修復了更改 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);
    };
//};
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板