Puščice za spreminjanje meseca v koledarju na JavaScript

Poglejmo si zdaj pod koledarjem puščice za spreminjanje meseca. Spremenimo HTML kodo:

<div id="parent">
	<div id="calendar">
		<div class="info">Jan 2020</div>
		<table>
			<thead>
				<tr>
					<th>pon</th>
					<th>tor</th>
					<th>sre</th>
					<th>čet</th>
					<th>pet</th>
					<th>sob</th>
					<th>ned</th>
				</tr>
			</thead>
			<tbody class="body"></tbody>
		</table>
		<div class="nav">
			<a href="#" class="prev">←</a>
			<a href="#" class="next">→</a>
		</div>
	</div>
</div>

Spremenimo CSS kodo:

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

Pridobimo povezave na puščice v spremenljivke:

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

Razprava

Poglejmo si zdaj, kako rešiti nalogo. Pravzaprav je koda našega koledarja napisana dobro razširljivo: imamo funkcijo draw, ki riše koledar za dani mesec. Tako lahko ob kliku na puščico ponovno narišemo koledar z drugim številkom meseca (in morda leta).

Tu je primer, kaj lahko naredimo ob kliku na puščico naslednjega meseca:

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

Kot lahko vidite, tukaj se uporabljata funkciji getNextYear in getNextMonth. Poglejmo, kaj naj bi delali.

Kot sledi iz imena, funkcija getNextYear pridobi naslednje leto. Tu se misli na to, da če je trenutno december, potem bi se moralo leto ob preklopu na naslednji mesec povečati za 1. Če pa trenutno ni december, potem mora funkcija preprosto vrniti trenutno leto.

Funkcija getNextMonth mora pridobiti naslednji mesec. Za vse mesece, razen decembra, bo k številki meseca dodala ena. No, za december pa bo naslednji mesec januar s številko 0.

Podobne operacije je treba narediti ob kliku na gumb prejšnjega meseca:

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

Implementirajte delovanje gumbov za spreminjanje meseca.

Poskrbite, da bodo informacije nad koledarjem ustrezale prikazanemu mesecu in letu.