编辑事件渲染（）后的fullcalendar v5不刷新

Posted 2023-05-08

【中文标题】编辑事件渲染（）后的fullcalendar v5不刷新

【英文标题】：fullcalendar v5 after edit event render() don't refresh

【发布时间】：2022-01-03 21:10:57

【问题描述】：

当我编辑事件列表时，它会正确重新加载，但日历不会刷新。 如果我单击其他选项卡然后在日历选项卡中返回它会刷新：引导程序有问题吗？这是我初始化日历的函数

function getCalendar(mydate) 
    //Date for the calendar events (dummy data)
    var date = new Date()
    var d    = date.getDate(),
        m    = date.getMonth(),
        y    = date.getFullYear()
    var calendar = FullCalendar.Calendar;

    var calendarEl = document.getElementById('calendar');

    var calEv=bindEvents(mydate);
    //var calRi=bindResource(mydate);

    dCal = new calendar(calendarEl, 
        schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
        timeZone: 'UTC',
        height: '100%',
        contentHeight: 'auto',
        initialView: 'dayGridMonth',
        themeSystem: 'bootstrap',
        locale: 'it',
      //Random default events
      //events: 'https://fullcalendar.io/demo-events.json',
        //events: bindEvents(mydate),
        //events: calEv,
        //events: evUrl,
        events: function(info, successCallback, failureCallback) 
                var evUrl     = window.apiurl+'/api/anagrafiche/tourfascecalevents/'+id_entita;
                $.ajax(evUrl, 
                    type: 'GET',
                    cache: false,
                ).done(function(dati) 
                    dbgConsole("render init ev");
                    dbgConsole(dati);
                    ev=bindEvents(dati);
                    dbgConsole(ev);
                    successCallback(ev);
                ).fail(function(x,s,t) 
                    alert_error(x);
                );
        ,
        //resources: bindResource(mydate),
        initialDate: dataIni,
        editable  : true,
        selectable: true,
        droppable : false, // this allows things to be dropped onto the calendar !!!
        dateClick: function(info) 
            dbgConsole(info);//event.setProp( name, value )
            var cls=[];
            var data_fine = moment(info.dateStr, "YYYY-MM-DD").add(gg_viaggio, 'days').format('YYYY-MM-DD');
            if ('undefined' == typeof grpSelected || ''==grpSelected) 
//              alert('Cancellazione data: ' + info.dateStr + ' !');
                var reqUrl     = window.apiurl+'/api/anagrafiche/tourfasce/'+id_entita;
                $.ajax(reqUrl, 
                    type: 'DELETE',
                    cache: false,
                    data: 
                        id_gruppo: id_gruppo,
                        id_entita: id_entita,
                        MM_delete: 'form_fascedel',
                        data_inizio: info.dateStr
                    
                ).done(function(dati) 
                    window.tables['FasceTable'].setData();
                    dbgConsole("render");
                    //$('#h-tab').trigger('click');
                    //$('#dati-fasce-tab').trigger('click');
                    dCal.render();
                    //dCal.updateSize();
                    
                ).fail(function(x,s,t) 
                    alert_error(x);
                );
             else 
//              alert('Imposta data: ' + info.dateStr + ' in gruppo "'+grpSelected+'" !');
                var reqUrl     = window.apiurl+'/api/anagrafiche/tourfasce/'+id_entita;
                $.ajax(reqUrl, 
                    type: 'PUT',
                    cache: false,
                    data: 
                        id_gruppo: id_gruppo,
                        id_entita: id_entita,
                        MM_update: 'form_fasceupd',
                        data_inizio: info.dateStr,
                        nome_periodo: grpSelected,
                        data_fine: data_fine
                    
                ).done(function(dati) 
                    window.tables['FasceTable'].setData();
                    dbgConsole("render");
                    //$('#h-tab').trigger('click');
                    //$('#dati-fasce-tab').trigger('click');
                    dCal.render();
                    //dCal.updateSize();

                ).fail(function(x,s,t) 
                    alert_error(x);
                );
            
//          alert('Gruppo: ' + id_gruppo + ' - Entita: "'+id_entita+ ' - Giorni: "'+gg_viaggio+'" !');
            //dCal.setOption('initialDate', '2021-06-01');
            //dCal.render();
        ,
        /*
            eventClick: function(calEvent, jsEvent, view) 
                var testo='';
                testo=testo+'Servizio: ' + calEvent.title_serv+'\n';
                testo=testo+'Inizio: ' + calEvent.start.format()+'\n';
                testo=testo+'Fine: ' + calEvent.end.format()+'\n';
                testo=testo+'Descrizione: ' + calEvent.title+'\n';
                alert(testo);
            
            */
    );
    //dCal.render();
    dbgConsole("Cal:")
    dbgConsole(dCal);//event.setProp( name, value )

这是激活

    $('#dati-fasce-tab').on('shown.bs.tab', function (event) 
        dCal.render();
    )

修改并重新加载“dateClick”事件但日历未更新视图后 P.S.：所有事件都是“背景”类型

是否已经存在任何不同的刷新方法？ 我们在隐藏区域刷新加载日历时遇到问题，知道吗？

【参考方案1】：

首先，你需要在initialize函数中渲染fullcalendar元素。

function getCalendar(mydate) 
    ...

    dCal = new calendar(calendarEl, 

    );

    dCal.render();

之后，您需要在触发更改选项卡或保存事件等事件时使用refetchEvents 函数。 https://fullcalendar.io/docs/Calendar-refetchEvents

dCal.refetchEvents();

您可能会遇到dCal 未定义之类的问题，然后您需要添加一些处理，例如

if (typeof dCal !== 'undefined') 
  dCal.refetchEvents();