Pijlen voor het wisselen van maand in kalender in JavaScript

Laten we nu onder de kalender pijlen maken voor het wisselen van maand. Laten we de HTML-code aanpassen:

<div id="parent">
	<div id="calendar">
		<div class="info">Jan 2020</div>
		<table>
			<thead>
				<tr>
					<th>ma</th>
					<th>di</th>
					<th>wo</th>
					<th>do</th>
					<th>vr</th>
					<th>za</th>
					<th>zo</th>
				</tr>
			</thead>
			<tbody class="body"></tbody>
		</table>
		<div class="nav">
			<a href="#" class="prev">←</a>
			<a href="#" class="next">→</a>
		</div>
	</div>
</div>

Laten we de CSS-code aanpassen:

#parent {
	text-align: center;
}
#calendar {
	display: inline-block;
}
#calendar td, #calendar th {
	padding: 10px;
	border: 1px solid black;
	text-align: center;
}

#calendar .nav, #calendar .info {
	text-align: center;
}
#calendar a {
	color: blue;
	font-size: 25px;
	text-decoration: none;
}
#calendar a:hover {
	color: red;
}

#calendar .active {
	color: red;
}

Laten we verwijzingen naar de pijlen in variabelen zetten:

let prev = calendar.querySelector('.prev');
let next = calendar.querySelector('.next');

Discussie

Laten we nu bespreken hoe we de taak moeten oplossen. Eigenlijk is de code van onze kalender goed uitbreidbaar geschreven: we hebben de functie draw, die de kalender tekent voor een bepaalde maand. Dus bij het klikken op een pijl kunnen we de kalender opnieuw tekenen met een ander maandnummer (en mogelijk jaar).

Hier is een voorbeeld van wat we kunnen doen bij een klik op de pijl van de volgende maand:

next.addEventListener('click', function() {
	draw(body, getNextYear(year, month), getNextMonth(month));
});

Zoals je ziet, worden hier de functies getNextYear en getNextMonth gebruikt. Laten we bespreken wat ze moeten doen.

Zoals de naam al zegt, krijgt de functie getNextYear het volgende jaar. Hier wordt bedoeld dat, als het nu december is, bij het wisselen naar de volgende maand het jaar moet worden verhoogd met 1. Als het nu geen december is, dan moet de functie gewoon het huidige jaar teruggeven.

De functie getNextMonth moet de volgende maand krijgen. Voor alle maanden, behalve december, zal het bij het maandnummer één optellen. Voor december is de volgende maand januari met nummer 0.

Vergelijkbare bewerkingen moeten worden uitgevoerd bij het klikken op de knop van de vorige maand:

prev.addEventListener('click', function() {
	draw(body, getPrevYear(year, month), getPrevMonth(month));
});

Implementeer de werking van de knoppen voor het wisselen van maand.

Zorg ervoor dat de informatie boven de kalender overeenkomt met de weergegeven maand en jaar.