i want to display the events that user set to days of calendar

Question

I am using alpine js and this project is a Persian calendar. I created all part of this calendar and it has an event. The user can set a note to each day and by click on that day can read the note.

Now I want to display the note on that day but when I return them on days, my calendar will return days with number under 0 or wrong numbers and I really don't understand what is the problem.

this the function that render the note on day

        showEventDay(d){ 
          const exatDay = `${this.year}/${this.month}/${d - this.daysGone}`;
          const eventForDay = this.events.find(e => e.date === exatDay);
          console.log(eventForDay);
          if(eventForDay){
            return eventForDay.title;
          }
        },

and this a span that revise the note

     <span x-text="showEventDay(days)"></span>

this the loop for render the days of month

        <template x-for="days in allDays">
          <div
            :class="setDayClass(days)"
            @click="openModal(`${year}/${month}/${days - daysGone}`)"
          >
            <template x-if="days > daysGone">
              <div class="flex flex-row justify-between bordered">
                <p x-text="days - daysGone"></p>
                <!-- <span x-text="showEventDay(days)"></span> -->

              </div>
            </template>

            <template x-if="days <= daysGone">
              <div></div>
            </template>
          </div>
        </template>

wen i uncomment that span events(notes) will show prefect but the count of days when i move between month will be messy.

this is how i move between months

        changeMonthSelect(e){
          switch(e.value) {
            case 'فرو':
              this.monthIndex = 1;
              this.load();
              break;
            case 'ارد':
              this.monthIndex = 2;
              this.load();
              break;
            case 'خرد':
              this.monthIndex = 3;
              this.load();
              break;
            case 'تیر':
              this.monthIndex = 4;
              this.load();
              break;
            case 'مرد':
              this.monthIndex = 5;
              this.load();
              break;
            case 'شهر':
              this.monthIndex = 6;
              this.load();
              break;
            case 'مهر':
              this.monthIndex = 7;
              this.load();
              break;
            case 'آبا':
              this.monthIndex = 8;
              this.load();
              break;
            case 'آذر':
              this.monthIndex = 9;
              this.load();
              break;
            case 'دی':
              this.monthIndex = 10;
              this.load();
              break;
            case 'بهم':
              this.monthIndex = 11;
              this.load();
              break;
            case 'اسف':
              this.monthIndex = 12;
              this.load();
              break;
            default:
              this.monthIndex = Number(this.month);
          } 
        },

and this condition

          //change the month
          if(this.monthIndex !== Number(this.month)){
            const currentMonth = this.monthIndex;
            this.month = new persianDate([Number(this.year),currentMonth,Number(this.day)]).toLocale('en').format('MM');
            this.monthName = new persianDate([Number(this.year),currentMonth,Number(this.day)]).toLocale('fa').format('MMM');
          }else if(this.month == '' && this.monthName == ''){
            this.month = dt.toLocale('en').format('MM'); 
            this.monthName = dt.toLocale('fa').format('MMM'); 
            this.today = Number(this.month);
            this.monthIndex = Number(this.month);
          }