I am trying to show a section in my website with either 3 months or 1 month from the current month and this depending on the screen size. User can then loop through the differents other months with the arrows in the screen month by month. Till now it seems working correctly. However I am struggling finding why when reaching february = (fevrier here) month it is not correctly posted and instead it shows March (Mars here) even though the calendar show 28 or 29 days caracteristic of february. May somebody find the reason why and explain it please. below is a reproducible snippet.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<div class="reservation_calendar"></div>

const calendar = document.querySelector('.reservation_calendar')

let date = new Date()
let dday = date.getDay()
let dmonth = date.getMonth()
let year = date.getFullYear()
let dateCounterLimit=3

let monthArray = ['Janvier','Fevrier','Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'decembre']


let dayone = new Date(year, dmonth, 1).getDay();
 
// Get the last date of the month
let lastdate = new Date(year, dmonth+1, 0).getDate();

// Get the day of the last date of the month
let dayend = new Date(year, dmonth, lastdate).getDay();

// Get the last date of the previous month
let monthlastdate = new Date(year, dmonth, 0).getDate();




function myCallBack(){
returnValue()
window.addEventListener('resize', appenDate)
window.onload = appenDate()
}


const returnValue = () =>{
    if(window.innerWidth<650){
        return {
            dateCounterLimit: 1,
        }
    }else{
        return {
            dateCounterLimit: 3,
         }
    }
};

const appenDate = () =>{
    calendar.innerHTML = ''
    dateCounterLimit=returnValue().dateCounterLimit
    console.log(dateCounterLimit)
    let i = document.createElement('i')
    i.className = 'bi bi-arrow-left-circle'
    calendar.appendChild(i)
    let i1 = document.createElement('i')
    i1.className = 'bi bi-arrow-right-circle'
    calendar.appendChild(i1)
    const icon = document.querySelectorAll('.reservation_calendar .bi')
    icon.forEach(icon=>icon.addEventListener('click',(e)=>{
        let target = e.target
        if(target.classList.contains('bi-arrow-right-circle')){
            dmonth++
            removeMonths()
            checkDateCalendarLimit(dmonth)
        }else{
            dmonth--
            removeMonths()
            checkDateCalendarLimit(dmonth)
        }
    }))
checkDateCalendarLimit(dmonth)

}


function checkDateCalendarLimit(dmonth){
    if(dateCounterLimit==1){
        console.log({dmonth})
        appendCalendar(dmonth)
    }
    else{
        for(let i=0; i<dateCounterLimit;i++){
            dmonth+=1
            console.log({dmonth})
            appendCalendar(dmonth)
        }
    }
}


function appendCalendar(param){
    let wrapper = document.createElement('div')
    let DateSpanWrapperDiv = document.createElement('div')
    DateSpanWrapperDiv.className = 'DateSpanWrapperDiv'
    let month_parag = document.createElement('p')
    month_parag.className = "the_month"
    calendar.appendChild(wrapper)
    wrapper.appendChild(month_parag)
    wrapper.appendChild(DateSpanWrapperDiv)
    wrapper.setAttribute('id', `dateWrapper_${param}`)
    wrapper.className = "dateWrapperDiv"
    let lastdate = new Date(year, param+1, 0).getDate();
    let dyear = date.getFullYear()

    if ((param) < 0 || (param) > 11) {
        date = new Date(year, param, new Date().getDate());
        dyear = date.getFullYear() 
        console.log({dyear})
        param = date.getMonth();
        month_parag.innerHTML = `${monthArray[param]} ${dyear}`
    }else{
        date = new Date()
        domth = date.getMonth()
        month_parag.innerHTML = `${monthArray[param]} ${year}`
    }

    for(let i=1; i<=lastdate; i++){
        let dateSpan = document.createElement('span')
        dateSpan.innerHTML = i
        DateSpanWrapperDiv.appendChild(dateSpan)
    }
}


function removeMonths(){
    const dateWrapperDiv = document.querySelectorAll('.dateWrapperDiv')
    dateWrapperDiv.forEach(elem=>elem.remove())
}



myCallBack()

.reservation_calendar {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 2rem;
  }

 .reservation_calendar .bi-arrow-left-circle{
    position: absolute;
    left: 0%;
    top: 50%;
  }

.reservation_calendar .bi-arrow-right-circle{
    position: absolute;
    right: 0%;
    top: 50%;
  }

.reservation_calendar .dateWrapperDiv{
    display: flex;
    flex-direction: column;
}

.reservation_calendar .dateWrapperDiv p{
    display: grid;
    place-items: center;
}

.reservation_calendar .dateWrapperDiv .DateSpanWrapperDiv {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: 0.5rem;
}

I tried to console.log the value of months at each step and still have the correct values. Can’t find what I am missing here.