Стрелки за смяна на месеца в календар на 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));
});

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

Направете така, че информацията над календара да съответства на показвания месец и година.