Săgeți pentru schimbarea lunii în calendar pe JavaScript

Să facem acum săgeți sub calendar pentru schimbarea lunii. Să facem modificări în codul HTML:

<div id="parent">
	<div id="calendar">
		<div class="info">Ian 2020</div>
		<table>
			<thead>
				<tr>
					<th>lun</th>
					<th>mar</th>
					<th>mie</th>
					<th>joi</th>
					<th>vin</th>
					<th>sâm</th>
					<th>dum</th>
				</tr>
			</thead>
			<tbody class="body"></tbody>
		</table>
		<div class="nav">
			<a href="#" class="prev">←</a>
			<a href="#" class="next">→</a>
		</div>
	</div>
</div>

Să facem modificări în codul CSS:

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

Să obținem legăturile către săgeți în variabile:

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

Discuție

Să discutăm acum cum să rezolvăm problema. De fapt, codul calendarului nostru este scris extensibil: avem funcția draw, care desenează calendarul pentru o lună dată. Astfel, la click pe săgeată putem redesena calendarul cu un alt număr de lună (și eventual an).

Iată un exemplu a ceea ce putem face la click pe săgeata lunii următoare:

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

După cum vedeți, aici sunt utilizate funcțiile getNextYear și getNextMonth. Să discutăm ce ar trebui să facă ele.

După cum sugerează și numele, funcția getNextYear obține următorul an. Aici se înțelege că, dacă acum este decembrie, atunci la comutarea la următoarea lună anul ar trebui să crească cu 1. Dacă acum nu este decembrie, atunci funcția ar trebui să returneze pur și simplu anul curent.

Funcția getNextMonth ar trebui să obțină următoarea lună. Ea pentru toate lunile, cu excepția lunii decembrie, va adăuga la numărul lunii o unitate. Iar pentru decembrie, următoarea lună va fi ianuarie cu numărul 0.

Operații similare ar trebui făcute la apăsarea butonului lunii precedente:

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

Implementați funcționarea butoanelor de schimbare a lunii.

Faceți ca informația de deasupra calendarului să corespundă lunii și anului afișate.