Flèches pour changer de mois dans un calendrier en JavaScript

Maintenant, plaçons sous le calendrier des flèches pour changer de mois. Apportons des modifications au code HTML :

<div id="parent">
	<div id="calendar">
		<div class="info">Jan 2020</div>
		<table>
			<thead>
				<tr>
					<th>lun</th>
					<th>mar</th>
					<th>mer</th>
					<th>jeu</th>
					<th>ven</th>
					<th>sam</th>
					<th>dim</th>
				</tr>
			</thead>
			<tbody class="body"></tbody>
		</table>
		<div class="nav">
			<a href="#" class="prev">←</a>
			<a href="#" class="next">→</a>
		</div>
	</div>
</div>

Apportons des modifications au code 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;
}

Récupérons les liens des flèches dans des variables :

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

Discussion

Discutons maintenant de la manière de résoudre le problème. En réalité, le code de notre calendrier est écrit de manière extensible : nous avons une fonction draw, qui dessine le calendrier pour un mois donné. Ainsi, lors d'un clic sur une flèche, nous pouvons redessiner le calendrier avec un autre numéro de mois (et éventuellement une autre année).

Voici un exemple de ce que nous pouvons faire lors d'un clic sur la flèche du mois suivant :

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

Comme vous le voyez, les fonctions getNextYear et getNextMonth sont utilisées ici. Discutons de ce qu'elles doivent faire.

Comme son nom l'indique, la fonction getNextYear obtient l'année suivante. Ici, cela signifie que si nous sommes en décembre, lors du passage au mois suivant, l'année doit être augmentée de 1. Si nous ne sommes pas en décembre, la fonction doit simplement renvoyer l'année en cours.

La fonction getNextMonth doit obtenir le mois suivant. Pour tous les mois, sauf décembre, elle ajoutera un au numéro du mois. Quant à décembre, le mois suivant sera janvier avec le numéro 0.

Des opérations similaires doivent être effectuées lors d'un clic sur le bouton du mois précédent :

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

Implémentez le fonctionnement des boutons de changement de mois.

Faites en sorte que les informations au-dessus du calendrier correspondent au mois et à l'année affichés.