Calendar în JavaScript

În această secțiune vom implementa un calendar. Pentru simplitate, vom face ca calendarul să fie afișat pentru luna curentă. Dar cu intenția că ulterior să poată fi îmbunătățit astfel încât să se poată schimba luna și anul. Iată un exemplu al ceea ce ar trebui să obținem:

Iată marcajul pe care îl puteți utiliza la rezolvarea problemei:

<div id="parent">
	<div id="calendar">
		<table>
			<thead>
				<tr>
					<th>lun</th>
					<th>mar</th>
					<th>mie</th>
					<th>joi</th>
					<th>vin</th>
					<th>sâm</th>
					<th>dum</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;
}

Să obținem imediat referințe către toate tagurile necesare în variabile, precum și să notăm luna și anul curente:

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

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

Copiați-vă pregătirile de cod prezentate de mine.