Javascript – February Month not showing correctly in my yearly calendar

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

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