Стрелки для смены месяца в календаре на JavaScript

Давайте теперь под календарем сделаем стрелки для смены месяца. Внесем изменения в HTML код:

<div id="parent">
	<div id="calendar">
		<div class="info">Янв 2020</div>
		<table>
			<thead>
				<tr>
					<th>пн</th>
					<th>вт</th>
					<th>ср</th>
					<th>чт</th>
					<th>пт</th>
					<th>сб</th>
					<th>вс</th>
				</tr>
			</thead>
			<tbody class="body"></tbody>
		</table>
		<div class="nav">
			<a href="#" class="prev">←</a>
			<a href="#" class="next">→</a>
		</div>
	</div>
</div>

Внесем изменения в CSS код:

#parent {
	text-align: center;
}
#calendar {
	display: inline-block;
}
#calendar td, #calendar th {
	padding: 10px;
	border: 1px solid black;
	text-align: center;
}

#calendar .nav, #calendar .info {
	text-align: center;
}
#calendar a {
	color: blue;
	font-size: 25px;
	text-decoration: none;
}
#calendar a:hover {
	color: red;
}

#calendar .active {
	color: red;
}

Получим ссылки на стрелки в переменные:

let prev = calendar.querySelector('.prev');
let next = calendar.querySelector('.next');

Обсуждение

Давайте теперь обсудим, как решать задачу. На самом деле код нашего календаря написан хорошо расширяемым: у нас есть функция draw, которая рисует календарь за заданный месяц. Таким образом при нажатии на стрелку мы можем перерисовать календарь с другим номером месяца (и возможно года).

Вот пример того, что мы можем сделать по клику на стрелку следующего месяца:

next.addEventListener('click', function() {
	draw(body, getNextYear(year, month), getNextMonth(month));
});

Как вы видите, здесь используются функции getNextYear и getNextMonth. Давайте обсудим, что они должны делать.

Как следует из названия функция getNextYear получает следующий год. Здесь имеется ввиду то, что, если сейчас декабрь, то при переключении на следующий месяц год должен увеличится на 1. Если же сейчас не декабрь, то функция просто должна вернуть текущий год.

Функция getNextMonth должна получать следующий месяц. Она для всех месяцев, кроме декабря, будет к номеру месяцу добавлять единицу. Ну а для декабря следующим месяцем будет январь с номером 0.

Аналогичные операции следует проделать при нажатии на кнопку предыдущего месяца:

prev.addEventListener('click', function() {
	draw(body, getPrevYear(year, month), getPrevMonth(month));
});

Реализуйте работу кнопок смены месяца.

Сделайте так, чтобы информация над календарем соответствовала отображаемому месяцу и году.