我正在使用一个旧代码库,该代码库在基于React的门户中使用完整日历(2.3.1)来显示资源视图,如所附图片所示。
每当我向前或向后移动日期或从日期选择器中选择一个日期时,日历就会变得非常慢。但是,只有在资源视图中有很多列并且只有更少的列(例如4或5)时,日历才可以正常工作。
是否有一种方法可以改善此视图的性能?
以下是初始化日历的代码:
$('#calendar').fullCalendar({
themeSystem: 'bootstrap3',
header: false,
events: [],
views: {
multiColAgendaDay: {
type: 'multiColAgenda',
duration: { days: 1 },
numColumns: employees.length,
columnHeaders: employees,
},
},
defaultView: defaultView,
eventMouseover: this.eventMouseover,
//eventMouseout: this.eventMouseout,
eventClick: props.onSelectEvent,
nowIndicator: true,
dayClick: this.selectTimeSlot,
eventDrop: this.eventDrop,
changeView: this.changeView,
eventResize: this.eventResize,
windowResize: this.windowResize,
slotDuration: '00:15',
axisFormat: 'h:mmA',
viewRender: this.viewRender,
allDaySlot: false,
eventRender: this.eventRender,
minTime: convert12To24(openingTime, 'hh:mma'),
maxTime: convert12To24(closingTime, 'hh:mma'),
businessHours: {
dow: [0, 1, 2, 3, 4, 5, 6],
start: convert12To24(openingTime, 'hh:mma'),
end: convert12To24(closingTime, 'hh:mma'),
},
});
更改视图:
changeView = view => {
this.calendarComponent.fullCalendar('changeView', view);
};
我无法更改当前的日历库,只能这样做