使用 FullCalendar 中的函数加载事件

Question

我正在使用 ExtJS 3.4 和 fullcalendar@5.10.2（使用 jsdelivr CDN）。

我的config对象：

var config = {
        events : eventsLoader, 
        initialView: 'dayGridMonth',
        height : 500,
        nowIndicator : true ,
        editable: false,
        locale : "fr",
        showNonCurrentDates: false,
        headerToolbar: {
            right: 'dayGridMonth,timeGridWeek,timeGridDay list',
            center: 'title',
            left: 'today prev,next'
        },
        footerToolbar: {
            right: "prevYear,nextYear"
        },
        buttonText : {
              today:    "Aujourd'hui",
              month:    'Mois',
              week:     'Semaine',
              day:      'Jour',
              list:     'Liste'
            }
    }

eventsLoader函数：

var eventsLoader =  function(fetchInfo, successCallback, failureCallback) {
            Ext.Ajax.request({              
                url : gpao.OF.url,
                method : "POST",
                params : {
                    action : 'getEvents',
                    idCentreDeCharge : id,
                },                  
                success : function(result,response) {   
                    var jsonData = Ext.util.JSON.decode(result.responseText);
                    var jsonRes = jsonData.results;
                    var events = jsonRes.map(function(eventEl) {
                                        return {
                                            title : eventEl.title,
                                            start : eventEl.start,
                                            end : eventEl.end
                                        }
                                    })
                    console.log("events : ",events);
                    successCallback(events);
                },
                failure : function() {
                    console.error('there was an error with the Ajax request to '+gpao.CentreCharge.url);
                    failureCallback("failed");
                }
            });
      }

fetchInfo对象：

var now = new Date();
var startDate = new Date();
startDate.setYear(now.getFullYear() - 3);
var endDate = new Date();
endDate.setYear(now.getFullYear() + 3);

var fetchInfo = {
        start : startDate.toISOString().split('T')[0],
        end : endDate.toISOString().split('T')[0]
    }
console.log("fetchInfo : ",fetchInfo);

传递给 successCallback(events) 的 events 数组示例如下所示：

我使用了一个虚拟事件数组来进行测试，我的日历呈现没有错误。

问题：

我在选项卡面板上呈现日历，这次使用 function 而不是虚拟数组，用户第一次选择它时，日历看起来一团糟（工作日都乱七八糟在左上角彼此重叠），直到我调整页面大小 CTRL + MouseWheel，切换视图，或单击 prev,next,prevYear,nextYear,today 之类的任何按钮，我被困在这个, 任何帮助表示赞赏。

Answer 1

如果您要隐藏日历元素所属的容器，那么您需要在 re-display 时调用日历的 render() 方法，否则它可能会因为处于隐藏容器。

使用 FullCalendar 中的函数加载事件

Loading events using a function in FullCalendar

javascript

fullcalendar

fullcalendar-5

问题：