I've used fullcalendar package in angular to show events for a month. Both date and events can be clicked and there is a function to handle both date click and event click. It works fine in desktop and android phones but the issue is in iPhone, there is a significant delay on each date/event click. After tapping on an event it takes some time to render the selection.

I have noticed that eventContent was being called every time on event click and it is called multiple times, and sometimes get the following warnings,

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

I've already tried commenting selection handling and eventContent functions but didn't notice any significant difference.

fullcalendar initialization

    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)
    };