Kalender i JavaScript

I det här avsnittet implementerar vi en kalender. För enkelhetens skull kommer vi bara att se till att kalendern visas för den aktuella månaden. Men med målsättningen att den ska kunna utvecklas så att man kan ändra månad och år. Här är ett exempel på vad vi bör få:

Här är HTML-strukturen du kan använda när du löser uppgiften:

<div id="parent">
	<div id="calendar">
		<table>
			<thead>
				<tr>
					<th>mån</th>
					<th>tis</th>
					<th>ons</th>
					<th>tors</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;
}

Låt oss omedelbart hämta referenser till alla nödvändiga taggar i variabler, och även spara nuvarande månad och år:

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

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

Kopiera de kodutkott jag presenterat till dig.