Kalender i JavaScript

I denne delen skal vi implementere en kalender. For enkelthetens skyld vil vi bare gjøre det slik at kalenderen vises for inneværende måned. Men med tanke på at den kan utvikles videre slik, at man kan endre måned og år. Her er et eksempel på hva vi bør oppnå:

Her er HTML-strukturen du kan bruke når du løser oppgaven:

<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;
}

La oss umiddelbart få referanser til alle nødvendige tagger i variabler, og også skrive ned gjeldende 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 presenterte kodesnuttene til deg selv.