Calendario in JavaScript

In questa sezione implementeremo un calendario. Per semplicità, faremo in modo che il calendario venga visualizzato per il mese corrente. Ma con l'idea che possa essere migliorato in modo da poter cambiare mese e anno. Ecco un esempio di ciò che dovremmo ottenere:

Ecco il markup che puoi utilizzare per risolvere il problema:

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

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

Ora otteniamo i riferimenti a tutti gli elementi necessari in variabili, e registriamo anche il mese e l'anno corrente:

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

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

Copia i frammenti di codice che ho fornito.