Проблема с производительностью Fullcalender (угловая) на устройствах iphone

#javascript #angular #iphone #performance #fullcalendar

Вопрос:

Я использовал пакет fullcalendar в angular для отображения событий в течение месяца. Можно щелкнуть как по дате, так и по событиям, и есть функция для обработки как щелчка по дате, так и щелчка по событию. Он отлично работает на настольных компьютерах и телефонах Android, но проблема в iPhone, при каждом нажатии даты/события происходит значительная задержка. После нажатия на событие требуется некоторое время, чтобы отобразить выделение.

Я заметил, что eventContent вызывается каждый раз при нажатии на событие, и он вызывается несколько раз, а иногда получает следующие предупреждения,

 [Violation] 'setInterval' handler took 52ms
[Violation] 'setTimeout' handler took 66ms
[Violation] Forced reflow while executing JavaScript took 31ms
 

Я уже пробовал комментировать функции обработки выбора и eventContent, но не заметил никакой существенной разницы.

инициализация fullcalendar

     this.calendarOptions = {
    headerToolbar: {
      left: '',
      right : 'prev title next'
    },
    customButtons:
    {
    prev:{
      click:this.previousMonth.bind(this)
    },
    next:{
      click:this.nextMonth.bind(this)
    },
    },
    showNonCurrentDates: false,
    fixedWeekCount: false,
    views: {
      dayGridMonth: { // name of view
        titleFormat: {month:"2-digit"}
      }
    },
    dayCellContent: arg => {
      return arg.date.getDate();
    },
    aspectRatio:1.2,
    height: 'auto',
    unselectAuto: false,
    eventColor:"white",
    locale:jaLocale,
    rerenderDelay:1,
    initialDate: 2021-09-17,
    events:this.Price,
    eventContent:this.renderEvent, 
    select: this.handleDateSelect.bind(this),
    dateClick: clickInfo => {
      const calendarApi = clickInfo.view.calendar;
      calendarApi.select(clickInfo.date);
    },
    eventClick: clickInfo => {
      const calendarApi = clickInfo.view.calendar;
      calendarApi.select(clickInfo.event.start);
    },
    datesSet: this.handleDatesSet.bind(this),
    unselect: this.handleDateUnselect.bind(this)
    };
 

индивидуальный полный календарь