Strzałki do zmiany miesiąca w kalendarzu w JavaScript

Zróbmy teraz pod kalendarzem strzałki do zmiany miesiąca. Wprowadźmy zmiany w kodzie HTML:

<div id="parent">
	<div id="calendar">
		<div class="info">Sty 2020</div>
		<table>
			<thead>
				<tr>
					<th>pon</th>
					<th>wt</th>
					<th>śr</th>
					<th>czw</th>
					<th>pt</th>
					<th>sob</th>
					<th>niedz</th>
				</tr>
			</thead>
			<tbody class="body"></tbody>
		</table>
		<div class="nav">
			<a href="#" class="prev">←</a>
			<a href="#" class="next">→</a>
		</div>
	</div>
</div>

Wprowadźmy zmiany w kodzie 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;
}

Pobierzmy odnośniki do strzałek do zmiennych:

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

Dyskusja

Porozmawiajmy teraz o tym, jak rozwiązać zadanie. W rzeczywistości kod naszego kalendarza jest napisany z dobrą rozszerzalnością: mamy funkcję draw, która rysuje kalendarz na zadany miesiąc. Zatem po kliknięciu strzałki możemy przerysować kalendarz z innym numerem miesiąca (i ewentualnie roku).

Oto przykład tego, co możemy zrobić po kliknięciu strzałki następnego miesiąca:

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

Jak widać, tutaj są używane funkcje getNextYear i getNextMonth. Porozmawiajmy o tym, co powinny robić.

Jak wynika z nazwy, funkcja getNextYear pobiera następny rok. Tutaj chodzi o to, że jeśli teraz jest grudzień, to po przełączeniu na następny miesiąc rok powinien zwiększyć się o 1. Jeśli zaś teraz nie jest grudzień, to funkcja po prostu powinna zwrócić bieżący rok.

Funkcja getNextMonth powinna pobrać następny miesiąc. Dla wszystkich miesięcy, oprócz grudnia, będzie do numeru miesiąca dodawać jeden. A dla grudnia następnym miesiącem będzie styczeń z numerem 0.

Podobne operacje należy wykonać po kliknięciu przycisku poprzedniego miesiąca:

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

Zaimplementuj działanie przycisków zmiany miesiąca.

Spraw, aby informacja nad kalendarzem odpowiadała wyświetlanemu miesiącowi i rokowi.