Как подправить календарь на чистом javascript?

Question

[Gor321]

Здравствуйте! Делаю, календарь на чистом js, нашел и доработал готовый скрипт, но застопорился на паре мелочей.
Мой календарь показывает числа только текущего месяца. Как сделать чтобы в начале и в конце календаря выводились числа предыдущего и следующего месяцев соответственно образуя тем самым ровную таблицу без пробелов?

И еще одно. Что нужно сделать, чтобы скрипт заполнял первую строку месяца, как на картинке, то есть день недели + число?
Ну и если увидите какие то ошибки или недочеты, буду рад послушать, заранее спасибо!!!
https://jsfiddle.net/furcifer21/6bac25ms/4/

Comments

[Дмитрий]

let используйте только тогда, когда переменной присваивается в коде другое значение, иначе const

Answer 1

[Дмитрий]

Все куда проще

function showCalendar(month, year) {

      //Берем текущую дату
      const currDay = new Date(year, month);
      
      //Находим дату начала недели
      currDay.setDate(currDay.getDate() - currDay.getDay() + 1);
      
      //Делаем заголовок дней недели
      const tbl = document.getElementById("calendar-body"); 
      tbl.innerHTML = '<tr><th>пн</th><th>вт</th><th>ср</th><th>чт</th><th>пт</th><th>сб</th><th>вс</th>';
      
      // filing data about month and in the page via DOM.
      monthAndYear.innerHTML = months[month] + " " + year;
     
      //Пока понедельник не выходит за пределы текущего месяца
      // добавляем строки
      while(currDay.getMonth() <= month) {
         const row = document.createElement("tr");
         for(let i = 0; i < 7; i++) {
            row.innerHTML += '<th>' + currDay.getDate() + '</th>';
            //Увеличиваем дату на единицу
            currDay.setDate(currDay.getDate() + 1);
         }
         tbl.appendChild(row);  
      }
}

Comments

[Gor321]

А подскажите, как вывести в первой строке и дни недели и числа, как на картинке?

[Дмитрий]

Например вместо

tbl.innerHTML = '<tr><th>пн</th><th>вт</th><th>ср</th><th>чт</th><th>пт</th><th>сб</th><th>вс</th>';

написать

var weekDays = ['Понедельник, ', 'Вторник, ' ... и т.д. ];

а внутри цикла

row.innerHTML += '<th>' + (weekDays.shift() || '') + currDay.getDate() + '</th>';

[Gor321]

dimoff66, спасибо огромное!

[Gor321]

dimoff66, еще малюсенький вопросик, как выделить текущее число, с помощью присвоения класса?
Делал так

if (currDay === today.getDate() && year === today.getFullYear() && month === today.getMonth()) {
				currDay.classList.add("today");
			}

Ошибок нет, ничего не меняется