Kalender in JavaScript

In diesem Abschnitt implementieren wir einen Kalender. Der Einfachheit halber sorgen wir einfach dafür, dass der Kalender für den aktuellen Monat angezeigt wird. Aber mit dem Ziel, ihn so zu erweitern, dass Monat und Jahr geändert werden können. Hier ist ein Beispiel dafür, was wir erreichen sollten:

Hier ist das Markup, das Sie bei der Lösung der Aufgabe verwenden können:

<div id="parent">
	<div id="calendar">
		<table>
			<thead>
				<tr>
					<th>Mo</th>
					<th>Di</th>
					<th>Mi</th>
					<th>Do</th>
					<th>Fr</th>
					<th>Sa</th>
					<th>So</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;
}

Lassen Sie uns sofort Referenzen auf alle benötigten Tags in Variablen speichern sowie den aktuellen Monat und das Jahr notieren:

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

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

Kopieren Sie sich die von mir bereitgestellten Code-Vorlagen.