Kalender i JavaScript

I denne afdeling vil vi implementere en kalender. For at gøre det enkelt, vil vi bare sørge for, at kalenderen viser den aktuelle måned. Men med henblik på, at den kan udvikles yderligere, så man kan skifte måned og år. Her er et eksempel på, hvad vi skal opnå:

Her er den HTML-struktur, du kan bruge til at løse opgaven:

<div id="parent">
	<div id="calendar">
		<table>
			<thead>
				<tr>
					<th>man</th>
					<th>tir</th>
					<th>ons</th>
					<th>tor</th>
					<th>fre</th>
					<th>lør</th>
					<th>søn</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;
}

Lad os straks få referencer til alle de nødvendige tags i variabler og også registrere de aktuelle måned og år:

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

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

Kopier de viste kodeeksempler til dig selv.