完整日历慢速渲染

时间:2018-12-10 06:42:03

标签: javascript fullcalendar

我正在使用一个旧代码库,该代码库在基于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);
 };

我无法更改当前的日历库,只能这样做

Calendar Resource View

0 个答案:

没有答案