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

Рэалізуйце працу кнопак змены месяца.

Зрабіце так, каб інфармацыя над календаром адпавядала які адлюстроўваецца месяцу і году.