Calendario en JavaScript

En esta sección implementaremos un calendario. Para simplificar, lo haremos de modo que el calendario se muestre para el mes actual. Pero con la previsión de que se pueda modificar para poder cambiar el mes y el año. He aquí una muestra de lo que deberíamos obtener:

He aquí el código HTML/CSS que pueden utilizar para resolver la tarea:

<div id="parent">
	<div id="calendar">
		<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>
</div>

#parent {
	text-align: center;
}
#calendar {
	display: inline-block;
}
#calendar td, #calendar th {
	padding: 5px 12px;
	border: 1px solid black;
	text-align: center;
}

Inmediatamente vamos a obtener referencias a todas las etiquetas necesarias en variables, y también a guardar el mes y el año actuales:

let calendar = document.querySelector('#calendar');
let body = calendar.querySelector('.body');

let date  = new Date();
let year  = date.getFullYear();
let month = date.getMonth();

Copien para ustedes los códigos preparados que les he presentado.