Flechas para cambiar mes en calendario con JavaScript

Ahora hagamos flechas debajo del calendario para cambiar el mes. Hagamos cambios en el código HTML:

<div id="parent">
	<div id="calendar">
		<div class="info">Ene 2020</div>
		<table>
			<thead>
				<tr>
					<th>lun</th>
					<th>mar</th>
					<th>mié</th>
					<th>jue</th>
					<th>vie</th>
					<th>sáb</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>

Hagamos cambios en el código 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;
}

Obtenemos los enlaces a las flechas en variables:

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

Discusión

Ahora discutamos cómo resolver la tarea. En realidad, el código de nuestro calendario está escrito de manera extensible: tenemos la función draw, que dibuja el calendario para un mes determinado. Así, al hacer clic en la flecha podemos redibujar el calendario con un número de mes diferente (y posiblemente año).

He aquí un ejemplo de lo que podemos hacer al hacer clic en la flecha del mes siguiente:

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

Como puede ver, aquí se utilizan las funciones getNextYear y getNextMonth. Discutamos qué deberían hacer.

Como su nombre indica, la función getNextYear obtiene el siguiente año. Aquí se refiere a que, si actualmente es diciembre, al cambiar al mes siguiente el año debería incrementarse en 1. Si no es diciembre, entonces la función simplemente debería devolver el año actual.

La función getNextMonth debería obtener el siguiente mes. Para todos los meses, excepto diciembre, agregará uno al número del mes. Y para diciembre, el siguiente mes será enero con el número 0.

Se deben realizar operaciones similares al hacer clic en el botón del mes anterior:

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

Implemente el funcionamiento de los botones de cambio de mes.

Haga que la información sobre el calendario corresponda al mes y año mostrados.