如何使我的日历正常工作？

Question

I have a problem with the calendar I designed and coded for a website. For example, the code is stuck on June 15th, 2022 but won't change to the next day and other days afterward. I've tried to remove the set date of the 15th but the whole labeling disappears in the live server I am using javascript to complete this. I provided my code below I hope you guys can help thank you

 /*calendar*/ const date = new Date(); const renderCalendar = () => { date.setDate(15); console.log(date.getDay()); const monthDays = document.querySelector(".days"); const lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(); const prevlastDay = new Date(date.getFullYear(), date.getMonth(), 0).getDate(); const firstDayIndex = date.getDay(); const lastDayIndex = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDay(); const nextDays = 7 - lastDayIndex - 1; const months = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July' , 'August', 'September', 'October', 'November', 'December' ]; document.querySelector(".date h1").innerHTML = months[date.getMonth()]; document.querySelector(".date p").innerHTML = date.toDateString(); let days = ""; for (let x = firstDayIndex; x > 0; x--) { date += `<div class="prev-date">${prevlastDay - x + 1}</div>`; } for (let i = 1; i <= lastDay; i++) { if (i === new Date().getDate() && date.getMonth() === new Date().getMonth()) { days += `<div class="today">${i}</div>`; } else { days += `<div>${i}</div>`; } } for (let j = 1; j <= nextDays; j++) { days += `<div class="next-date>${j}</div>`; } monthDays.innerHTML = days; } document.querySelector(".prev").addEventListener("click", () => { date.setMonth(date.getMonth() - 1); renderCalendar() }); document.querySelector(".next").addEventListener("click", () => { date.setMonth(date.getMonth() + 1); renderCalendar() }); renderCalendar()

 /* added for better reading */ .calendar__content > div > div { display : inline-Block; width : 3em; text-align : center; }

 <!--Calendar--> <div class="calendar"> <div class="calendar__container"> <div id="social" class="calendar__content"> <div class="months"> <i class="fas fa-angle-left prev"></i> <div class="date"> <h1>June</h1> <p>Wednesday June 15, 2022</p> </div> <i class="fas fa-angle-right next"></i> </div> <div class="weekdays"> <div>Sun</div> <div>Mon</div> <div>Tue</div> <div>Wed</div> <div>Thu</div> <div>Fri</div> <div>Sat</div> </div> <div class="days"> <div class="prev-date">29</div> <div class="prev-date">30</div> <div class="prev-date">31</div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> <div>13</div> <div>14</div> <div class="today">15</div> <div>16</div> <div>17</div> <div>18</div> <div>19</div> <div>20</div> <div>21</div> <div>22</div> <div>23</div> <div>24</div> <div>25</div> <div>26</div> <div>27</div> <div>28</div> <div>29</div> <div>30</div> <div class="next-date">1</div> <div class="next-date">2</div> </div> </div> <div class="bars"> <h2 class="event-month">June Event Schedule</h2> <hr style="color: white;"> <hr> <hr> <hr> <hr> </div> </div> </div>

Answer 1

sorry, but I don't think anyone will delve into your code... if it can help you I offer you here something very similar which should I hope at least inspire you

 const LANG = 'en-US' // 'en-US' 'fr-FR' , datPickPrev = document.querySelector('#date-picker > thead tr:nth-of-type(1) th:nth-of-type(1)') , datPickNext = document.querySelector('#date-picker > thead tr:nth-of-type(1) th:nth-of-type(3)') , datPick_M_Y = document.querySelector('#date-picker > thead tr:nth-of-type(1) th:nth-of-type(2)') , datPickDays = document.querySelector('#date-picker > tbody') , showMonthYear = dte => dte.toLocaleDateString(LANG, {month:'long', year:'numeric'}).replace(' de ',' ') ; const now = new Date() var curr_Y_M_d1 = new Date(now.getFullYear(),now.getMonth(),1 ) // init Head Days ---------------------------------------------------------------------------------------- let newRow = document.querySelector('#date-picker > thead').insertRow() , wDat = new Date(curr_Y_M_d1.getTime()) ; wDat.setDate(wDat.getDate() - wDat.getDay()) for (let c=0;c<7;++c) // set day list [Sun Mon Tue Wed Thu Fri Sat] { newRow.insertCell().textContent = wDat.toLocaleDateString(LANG, {weekday:'short'}) // narrow wDat.setDate(wDat.getDate() +1) } for (let r=0;r<6;++r) // add day rows datPickDays.appendChild( newRow.cloneNode(true) ) //-------------------------------------------------------------------------------------------------------- setGridDays() datPickPrev.onclick =_=> // previous month { datPickPrev.classList.add('clickedMonth') setGridDays(-1) setTimeout(_=>{ datPickPrev.classList.remove('clickedMonth') }, 200) // click anim } datPickNext.onclick =_=> // next Month { datPickNext.classList.add('clickedMonth') setGridDays(+1) setTimeout(_=>{ datPickNext.classList.remove('clickedMonth')}, 200) // click anim } datPickDays.onclick = ({target : td_el}) => // previous or next month clicked on calanda day. { if (!td_el.matches('td')) return if (!td_el.matches('td.clickMonth')) { let pickedDate = new Date(curr_Y_M_d1.getFullYear(), curr_Y_M_d1.getMonth(), +td_el.textContent ) console.clear() console.log( 'pickedDate -->', pickedDate.toDateString(), '<--') setTimeout(console.clear, 1500) return } // else no return and do a mov month... td_el.classList.add('clickedMonth' ) // pseudo anin start if (parseInt(td_el.textContent) < 20) datPickNext.click() // do next month click else datPickPrev.click() // do previous month click setTimeout(_=>{ td_el.classList.remove('clickedMonth') }, 200) // pseudo anin end } function setGridDays(movMonth = 0) { curr_Y_M_d1.setMonth( curr_Y_M_d1.getMonth() + movMonth ) // changing month +- let cMonth = curr_Y_M_d1.getMonth() , wDat = new Date(curr_Y_M_d1.getTime()) ; wDat.setDate(wDat.getDate() - wDat.getDay()) // set on 1st weekDay (sunday) datPick_M_Y.textContent = showMonthYear(curr_Y_M_d1) for (let r=0;r<6;++r) for (let c=0;c<7;++c) { datPickDays.rows[r].cells[c].textContent = wDat.getDate() // day number on month datPickDays.rows[r].cells[c].classList.toggle('clickMonth', (wDat.getMonth()!==cMonth)) datPickDays.rows[r].cells[c].classList.toggle('today', (wDat.toDateString()===now.toDateString())) wDat.setDate(wDat.getDate() +1) } }

 table { border-collapse : collapse; margin : 2em 1em; font-family : Arial, Helvetica, sans-serif; font-size : 16px; cursor : pointer; } td,th { padding : .2em .8em; border : 1px solid darkblue; text-align : center; } thead { background : #0d3269a9; color : #e4eefc; text-align : center; } .clickMonth { cursor : pointer; } tbody td.clickMonth { background : #b0c4dea8; color : grey; } .clickMonth:hover { color : #c72734; background : #dcd91491; } .clickedMonth { color : yellow !important; background : crimson !important; } table#date-picker > thead > tr > th:nth-of-type(2) { text-transform: capitalize; } .today { background: radial-gradient(circle at center, #a6deff 60%, whitesmoke 10%, whitesmoke); } tbody td:not(.clickMonth):hover { color : darkblue; font-weight: bold; }

 <table id="date-picker"> <thead> <tr> <th class="clickMonth">⇦</th> <th colspan="5"> month - year </th> <th class="clickMonth">⇨</th> </tr> </thead> <tbody></tbody> </table>