I am currently having an issues trying to properly display the correct month and year for an event.Looking at the picture below, I want to be able to click the right arrow button and move the that date the event was created.

https://i.stack.imgur.com/nMFkm.png

However, when I do click the goto button it stops on the 2022 of January as shown here, https://i.stack.imgur.com/aYHMn.png.

The way the calendar works is the current month is always set to 0 therefore, when I press today it will show me today's month. The code below is the event that allows the calendar to cycle to reach the event month.

I first split the event date into a string then, formatted the month into word. The findMatchingDate() will cycle through the months and years by the iteration of monthNumID. Since, I don't know the actual month number of the event. I created a while loop that will iterate the monthNumID based from the current month which is zero, until the currentMonth and currentYear match both the eventMonth and eventYear. I noticed that even if I do fix this bug another issues persists. What happens if an event is created before the current month? I'm a little bit confused here and any help will be much appreciated, thank you!

_goToEvent(currentEvent) {
    const findMatchingDate = function () {
      dt.setMonth(new Date().getMonth() + monthNumID);
      currentMonth = new Intl.DateTimeFormat('en-US', { month: 'long' }).format(
        dt
      );
      currentYear = String(dt.getFullYear());
    };

    let dt = new Date();
    let currentMonth;
    let currentYear;
    let eventData = currentEvent.date.split('/');

    const eventYear = eventData[0];

    eventData = new Date(Date.UTC(eventData[0], eventData[1]));

    const eventMonth = new Intl.DateTimeFormat('en-US', {
      month: 'long',
    }).format(eventData);

    findMatchingDate();

    while (currentYear != eventYear && currentMonth != eventMonth) {
      monthNumID++;
      findMatchingDate();
    }
    console.log(monthNumID);

    this._createCalender();
}