Hónapváltó nyilak a JavaScript naptárban

Most tegyünk a naptár alá nyilakat a hónap váltásához. Végezzünk módosításokat a HTML kódban:

<div id="parent">
	<div id="calendar">
		<div class="info">Jan 2020</div>
		<table>
			<thead>
				<tr>
					<th>hé</th>
					<th>ke</th>
					<th>sze</th>
					<th>cs</th>
					<th>pé</th>
					<th>szo</th>
					<th>va</th>
				</tr>
			</thead>
			<tbody class="body"></tbody>
		</table>
		<div class="nav">
			<a href="#" class="prev">←</a>
			<a href="#" class="next">→</a>
		</div>
	</div>
</div>

Végezzünk módosításokat a CSS kódban:

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

Kérjük le a nyilakra mutató hivatkozásokat változókba:

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

Megbeszélés

Most beszéljük meg, hogyan oldjuk meg a feladatot. Valójában a naptár kódja nagyon jól bővíthetően van megírva: van egy draw függvényünk, ami megrajzolja a naptárt egy adott hónapra. Így a nyílra kattintáskor mi csak újrarajzolhatjuk a naptárt egy másik hónapszámmal (és esetleg évvel).

Itt egy példa arra, amit tehetünk a következő hónap nyilára kattintva:

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

Amint látod, itt a getNextYear és a getNextMonth függvényeket használjuk. Beszéljük meg, mit kellene tenniük.

A getNextYear függvény a nevéből adódóan a következő évet kapja meg. Itt arra kell gondolni, hogy ha most december van, akkor a következő hónapra váltáskor az év eggyel növekednie kell, azaz 1-gyel. Ha viszont nem december van, akkor a függvénynek egyszerűen csak az aktuális évet kell visszaadnia.

A getNextMonth függvénynek a következő hónapot kell megkapnia. Minden hónapra, kivéve decembert, a hónap számához hozzáad egyet. Decemberre viszont a következő hónap január lesz, 0 számmal.

Hasonló műveleteket kell végrehajtani az előző hónap gombjának megnyomásakor:

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

Valósítsa meg a hónapváltó gombok működését.

Állítsa be úgy, hogy a naptár feletti információ az éppen megjelenített hónapnak és évnek feleljen meg.