Mėnesių keitimo rodyklės kalendoriuje su JavaScript

Dabar po kalendoriumi padarykime rodykles mėnesiams keisti. Atlikime pakeitimus HTML kode:

<div id="parent">
	<div id="calendar">
		<div class="info">Sau 2020</div>
		<table>
			<thead>
				<tr>
					<th>pr</th>
					<th>an</th>
					<th>tr</th>
					<th>kt</th>
					<th>pn</th>
					<th>št</th>
					<th>sk</th>
				</tr>
			</thead>
			<tbody class="body"></tbody>
		</table>
		<div class="nav">
			<a href="#" class="prev">←</a>
			<a href="#" class="next">→</a>
		</div>
	</div>
</div>

Atlikime pakeitimus CSS kode:

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

Gaukime nuorodas į rodykles į kintamuosius:

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

Aptarimas

Dabar aptarkime, kaip išspręsti užduotį. Tiesą sakant, mūsų kalendoriaus kodas parašytas gerai plečiamu būdu: mes turime funkciją draw, kuri piešia kalendorių už nurodytą mėnesį. Taigi, paspaudus rodyklę galime perpiešti kalendorių su kitu mėnesio numeriu (ir galbūt metais).

Štai pavyzdys, ką galime padaryti paspaudus kito mėnesio rodyklę:

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

Kaip matote, čia naudojamos funkcijos getNextYear ir getNextMonth. Aptarkime, ką jos turėtų daryti.

Kaip matyti iš pavadinimo, funkcija getNextYear gauna kitus metus. Čia turima omenyje tai, kad jei dabar yra gruodis, tada perjungus į kitą mėnesį metai turėtų padidėti 1. Jei dabar nėra gruodis, tada funkcija tiesiog turėtų grąžinti dabartinius metus.

Funkcija getNextMonth turėtų gauti kitą mėnesį. Ji visiems mėnesiams, išskyrus gruodį, prie mėnesio numerio pridės vienetą. O gruodžio atveju kitu mėnesiu bus sausis su numeriu 0.

Panašias operacijos reikėtų atlikti ir paspaudus ankstesnio mėnesio mygtuką:

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

Įgyvendinkite mėnesių keitimo mygtukų veikimą.

Padarykite taip, kad informacija virš kalendoriaus atitiktų rodomą mėnesį ir metus.