Bultas mēneša maiņai kalendārā JavaScript

Tagad zem kalendāra izveidosim bultas mēneša maiņai. Veiksim izmaiņas HTML kodā:

<div id="parent">
	<div id="calendar">
		<div class="info">Jan 2020</div>
		<table>
			<thead>
				<tr>
					<th>pn</th>
					<th>ot</th>
					<th>tr</th>
					<th>ce</th>
					<th>pk</th>
					<th>se</th>
					<th>sv</th>
				</tr>
			</thead>
			<tbody class="body"></tbody>
		</table>
		<div class="nav">
			<a href="#" class="prev">←</a>
			<a href="#" class="next">→</a>
		</div>
	</div>
</div>

Veiksim izmaiņas CSS kodā:

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

Iegūsim saites uz bultām mainīgajos:

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

Diskusija

Tagad apspriedīsim, kā atrisināt uzdevumu. Patiesībā mūsu kalendāra kods ir uzrakstīts labi paplašināms: mums ir funkcija draw, kas zīmē kalendāru norādītajam mēnesim. Tādējādi, noklikšķinot uz bultas, mēs varam pārzīmēt kalendāru ar citu mēneša numuru (un iespējams gadu).

Šeit ir piemērs, ko mēs varam izdarīt, klikšķinot uz nākamā mēneša bultas:

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

Kā jūs redzat, šeit tiek izmantotas funkcijas getNextYear un getNextMonth. Parunāsim par to, kas tām jādara.

Kā norāda nosaukums, funkcija getNextYear iegūst nākamo gadu. Šeit domāts, ka, ja šobrīd ir decembris, tad, pārslēdzoties uz nākamo mēnesi, gadam jāpalielinās par 1. Ja šobrīd nav decembris, tad funkcijai vienkārši jāatgriež pašreizējais gads.

Funkcijai getNextMonth jāiegūst nākamais mēnesis. Tā visiem mēnešiem, izņemot decembri, mēneša numuram pievienos viens. Bet decembrim nākamais mēnesis būs janvāris ar numuru 0.

Līdzīgas darbības jāveic, noklikšķinot uz iepriekšējā mēneša pogas:

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

Realizējiet mēneša maiņas pogu darbību.

Iestatiet, lai informācija virs kalendāra atbilstu attēlotajam mēnesim un gadam.