Šípky na prepínanie mesiaca v kalendári na JavaScript

Pridajme teraz pod kalendár šípky na prepínanie mesiaca. Vykonajme zmeny v HTML kóde:

<div id="parent">
	<div id="calendar">
		<div class="info">Jan 2020</div>
		<table>
			<thead>
				<tr>
					<th>po</th>
					<th>ut</th>
					<th>st</th>
					<th>št</th>
					<th>pi</th>
					<th>so</th>
					<th>ne</th>
				</tr>
			</thead>
			<tbody class="body"></tbody>
		</table>
		<div class="nav">
			<a href="#" class="prev">←</a>
			<a href="#" class="next">→</a>
		</div>
	</div>
</div>

Vykonajme zmeny v CSS kóde:

#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;
}

Získajme odkazy na šípky do premenných:

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

Diskusia

Poďme teraz diskutovať o tom, ako úlohu vyriešiť. Kód nášho kalendára je napísaný s dobrým dôrazom na rozšíriteľnosť: máme funkciu draw, ktorá vykreslí kalendár pre zadaný mesiac. To znamená, že pri kliknutí na šípku môžeme prekresliť kalendár s iným číslom mesiaca (a prípadne roku).

Tu je príklad toho, čo môžeme urobiť pri kliknutí na šípku nasledujúceho mesiaca:

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

Ako vidíte, tu sa používajú funkcie getNextYear a getNextMonth. Poďme sa rozprávať o tom, čo by mali robiť.

Ako názov napovedá, funkcia getNextYear získa nasledujúci rok. Tu sa myslí to, že ak je teraz december, tak pri prepnutí na nasledujúci mesiac by sa mal rok zvýšiť o 1. Ak teraz nie je december, tak funkcia by mala jednoducho vrátiť aktuálny rok.

Funkcia getNextMonth by mala získať nasledujúci mesiac. Pre všetky mesiace okrem decembra bude k číslu mesiaca pridávať jeden. No a pre december bude nasledujúcim mesiacom január s číslom 0.

Podobné operácie by sme mali vykonať pri kliknutí na tlačidlo predchádzajúceho mesiaca:

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

Implementujte funkčnosť tlačidiel na prepínanie mesiaca.

Zaistite, aby informácia nad kalendárom zodpovedala zobrazenému mesiacu a roku.