@JuniorPro

Как загрузить даты нового месяца в календарь, без удаления предыдущих и без добавления к предыдущим новых div?

Делаю календарь с системой бронирования, не получается корректно обновить месяц при нажатии кнопок prevBtn nextBtn, он мало того, что добавляет данные к уже существующим, так еще и по непонятной причине создает несколько пустых div 'Week', пробовал через replaceChildren, ноль эффекта, при использовании Empty() вообще все данные стираются. Решение сделать добавление дат через innerHTML вместо appendChild мне не подходит, подскажите, что сделать?

const monthYearElement = document.getElementById('monthYear');
const datesElement = document.getElementById('dates');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');

let currentDate = new Date();


const updateCalendar = () => {
    const currentYear = currentDate.getFullYear();
    const currentMonth = currentDate.getMonth();

    const firstDay = new Date(currentYear, currentMonth, 0);
    const lastDay = new Date(currentYear, currentMonth + 1, 0);
    const totalDays = lastDay.getDate();
    const firstDayIndex = firstDay.getDay();
    const lastDayIndex = lastDay.getDay();

    const monthYearString = currentDate.toLocaleString('ru-RU', {month: 'long', year: 'numeric'});
    monthYearElement.textContent = monthYearString;

for (let i = firstDayIndex; i > 0; i--) {
        const prevDate = new Date(currentYear, currentMonth, 0 - i + 1);
        let day = document.createElement('div');
        day.classList.add('date');
        day.classList.add('inactive');
        day.textContent = `${prevDate.getDate()}`;
        datesElement.appendChild(day)
    }

    for (let i = 1; i <= totalDays; i++) {
        const date = new Date(currentYear, currentMonth, i);
        let day = document.createElement('div');
        day.classList.add('date');
            if(date === currentDate){
                day.classList.add('today');
            }
        day.textContent = `${i}`;
        datesElement.appendChild(day)

    }

    for (let i = 1; i <= 7 - lastDayIndex; i++) {
        const nextDate = new Date(currentYear, currentMonth + 1, i);
        let day = document.createElement('div');
        day.classList.add('date');
        day.classList.add('inactive');
        day.textContent = `${nextDate.getDate()}`;
        datesElement.appendChild(day)
    }

    let days = document.querySelectorAll('.date');
    let week;
    for (let i = 0; i < days.length; i++) {
      if (i%7 === 0) {
        week = document.createElement('div');
        week.className = "week";
        datesElement.appendChild(week);
      }
      week.appendChild(days[i]);
    }
}
updateCalendar();




prevBtn.addEventListener('click', () => {
    currentDate.setMonth(currentDate.getMonth() - 1);
    updateCalendar();
})

nextBtn.addEventListener('click', () => {
    currentDate.setMonth(currentDate.getMonth() + 1);
    updateCalendar();
})
  • Вопрос задан
  • 11 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы