Angular - 全日历，如果我在特定的一天只有一个事件并且它被移到下周

Question

我想显示特定日期的事件。如果我有超过 2 个事件，将显示 2 个事件，然后添加按钮。如果我们点击按钮将显示所有事件。如果我有以下 2 个事件，将按原样显示。但问题是如果我有超过 2 个事件，它会按我预期的那样工作。如果我在特定的一天只有一个活动并且它被移到下周

我改变了日期格式来解决这个问题。但它不起作用。

dayCellDidMount：（信息）=> { const cellEl = info.el;

  const date = DateTime.fromJSDate(info.date).toJSDate();
  const dayEvents = (this.calendarEventsData as Event[]).filter((event: any) => {
    const eventDate = DateTime.fromISO(event.date).toJSDate();
    const eventDateStr = eventDate.toISOString().split('T')[0];
    const dateStr = date.toISOString().split('T')[0];
    return eventDateStr === dateStr;
  });

  console.log(`Events for ${date}:`, dayEvents);

  const eventCount = dayEvents.length;
  console.log(`Events count for ${date}: ${eventCount}`);

  dayEvents.forEach(event => {
    console.log(`Event date: ${event.date}`);
  });

 
console.log("eventcount before loop: ", eventCount)
  if (eventCount <= 2) {
    dayEvents.forEach(event => {
    
      const eventEl = document.createElement('p');
      if (event.extendedProps && event.extendedProps.name) {
        eventEl.innerText = event.title + ' ' +event.extendedProps.name;
        eventEl.classList.add('has-extended-props');
      } else {
        eventEl.innerText = event.title;
      }
      // eventEl.innerText = event.extendedProps.name;
      eventEl.style.backgroundColor = event.backgroundColor;
      eventEl.style.color = event.textColor;
      eventEl.style.borderColor = event.borderColor
      eventEl.style.fontStyle = event.fontStyle;
      eventEl.style.fontFamily = event.fontFamily;

      cellEl.appendChild(eventEl);
    });
  } 
  else {
    const limitedEvents = dayEvents.slice(0, 2);
    limitedEvents.forEach(event => {
      const eventEl = document.createElement('p');
      if (event.extendedProps && event.extendedProps.name) {
        eventEl.innerText = event.title + ' ' +event.extendedProps.name;
        eventEl.classList.add('has-extended-props');
      } else {
        eventEl.innerText = event.title;
      }
      eventEl.style.backgroundColor = event.backgroundColor;
      eventEl.style.color = event.textColor;
      eventEl.style.borderColor = event.borderColor
      eventEl.style.fontStyle = event.fontStyle;
      eventEl.style.fontFamily = event.fontFamily;
      cellEl.appendChild(eventEl);
    });
    const button = document.createElement('button');
    button.innerText = `${eventCount - 2} more`;
    cellEl.appendChild(button);

    button.addEventListener('click', () => {
      const modalOverlay = document.createElement('div');
      modalOverlay.classList.add('modal-overlay');

      const modal = document.createElement('div');
      modal.classList.add('modal');

      const modalHeader = document.createElement('div');
      modalHeader.classList.add('modal-header');
      modalHeader.innerText = `Events for ${date.toLocaleDateString()}`;
      modal.appendChild(modalHeader);

      const modalBody = document.createElement('div');
      modalBody.classList.add('modal-body');
      dayEvents.forEach(event => {
        const eventEl = document.createElement('li');
        eventEl.innerText = event.title;
        modalBody.appendChild(eventEl);
      });
      modal.appendChild(modalBody);

      const modalCloseButton = document.createElement('button');
      modalCloseButton.classList.add('modal-close-button');
      modalCloseButton.innerText = 'Close';
      modalCloseButton.addEventListener('click', () => {
        modalOverlay.remove();
      });
      modal.appendChild(modalCloseButton);

      modalOverlay.appendChild(modal);
      document.body.appendChild(modalOverlay);
    });
  }

  cellEl.addEventListener('mouseenter', () => {
    cellEl.style.cursor = 'pointer';
  });
  cellEl.addEventListener('mouseleave', () => {
    cellEl.style.cursor = '';
  });
}