Ημερολόγιο σε JavaScript

Σε αυτή την ενότητα θα υλοποιήσουμε ένα ημερολόγιο. Για απλότητα, απλά θα φροντίσουμε το ημερολόγιο να εμφανίζεται για τον τρέχοντα μήνα. Αλλά με στόχο να μπορεί στη συνέχεια να βελτιωθεί έτσι ώστε να μπορούμε να αλλάζουμε μήνα και έτος. Ακολουθεί ένα δείγμα του τι πρέπει να έχουμε ως αποτέλεσμα:

Ακολουθεί το σκελετός HTML/CSS που μπορείτε να χρησιμοποιήσετε για την επίλυση της άσκησης:

<div id="parent">
	<div id="calendar">
		<table>
			<thead>
				<tr>
					<th>Δε</th>
					<th>Τρ</th>
					<th>Τε</th>
					<th>Πε</th>
					<th>Πα</th>
					<th>Σα</th>
					<th>Κυ</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;
}

Ας πάρουμε αμέσως αναφορές σε όλες τις απαραίτητες ετικέτες σε μεταβλητές, και ας αποθηκεύσουμε τον τρέχοντα μήνα και έτος:

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

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

Αντιγράψτε στον κώδικά σας τα αποσπάσματα κώδικα που σας παρέχω.