Kalender in JavaScript

In deze sectie implementeren we een kalender. Voor de eenvoud zorgen we ervoor dat de kalender voor de huidige maand wordt weergegeven. Maar met het oog op de mogelijkheid om het later uit te breiden, zodat maand en jaar kunnen worden gewijzigd. Hier is een voorbeeld van wat we moeten bereiken:

Hier is de opmaak die u kunt gebruiken bij het oplossen van de taak:

<div id="parent">
	<div id="calendar">
		<table>
			<thead>
				<tr>
					<th>ma</th>
					<th>di</th>
					<th>wo</th>
					<th>do</th>
					<th>vr</th>
					<th>za</th>
					<th>zo</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;
}

Laten we meteen verwijzingen naar alle benodigde tags in variabelen krijgen, en ook de huidige maand en jaar opslaan:

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

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

Kopieer de door mij verstrekte codefragmenten voor uzelf.