Frecce per cambiare mese nel calendario in JavaScript

Ora aggiungiamo sotto il calendario le frecce per cambiare mese. Apportiamo modifiche al codice HTML:

<div id="parent">
	<div id="calendar">
		<div class="info">Gen 2020</div>
		<table>
			<thead>
				<tr>
					<th>lun</th>
					<th>mar</th>
					<th>mer</th>
					<th>gio</th>
					<th>ven</th>
					<th>sab</th>
					<th>dom</th>
				</tr>
			</thead>
			<tbody class="body"></tbody>
		</table>
		<div class="nav">
			<a href="#" class="prev">←</a>
			<a href="#" class="next">→</a>
		</div>
	</div>
</div>

Apportiamo modifiche al codice 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;
}

Assegniamo i collegamenti delle frecce a delle variabili:

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

Discussione

Ora discutiamo come risolvere il problema. In realtà, il codice del nostro calendario è scritto in modo facilmente estendibile: abbiamo la funzione draw, che disegna il calendario per un dato mese. Pertanto, cliccando su una freccia, possiamo ridisegnare il calendario con un numero di mese diverso (e forse anno).

Ecco un esempio di cosa possiamo fare al clic sulla freccia del mese successivo:

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

Come puoi vedere, qui vengono utilizzate le funzioni getNextYear e getNextMonth. Discutiamo cosa dovrebbero fare.

Come suggerisce il nome, la funzione getNextYear ottiene l'anno successivo. Qui si intende che, se siamo a dicembre, passando al mese successivo l'anno dovrebbe aumentare di 1. Se invece non siamo a dicembre, la funzione dovrebbe semplicemente restituire l'anno corrente.

La funzione getNextMonth dovrebbe ottenere il mese successivo. Per tutti i mesi, tranne dicembre, aggiungerà uno al numero del mese. Mentre per dicembre il mese successivo sarà gennaio con numero 0.

Operazioni simili dovrebbero essere eseguite quando si fa clic sul pulsante del mese precedente:

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

Implementa il funzionamento dei pulsanti per cambiare mese.

Fai in modo che le informazioni sopra il calendario corrispondano al mese e all'anno visualizzati.