Pilar för att byta månad i kalender i JavaScript

Låt oss nu lägga till pilar under kalendern för att byta månad. Vi gör ändringar i HTML-koden:

<div id="parent">
	<div id="calendar">
		<div class="info">Jan 2020</div>
		<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 class="nav">
			<a href="#" class="prev">←</a>
			<a href="#" class="next">→</a>
		</div>
	</div>
</div>

Vi gör ändringar i CSS-koden:

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

Låt oss hämta länkarna till pilarna i variabler:

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

Diskussion

Låt oss nu diskutera hur man löser uppgiften. Faktum är att koden för vår kalender är skriven med bra utbyggbarhet: vi har funktionen draw, som ritar kalendern för en given månad. Således kan vi, när vi klickar på en pil, rita om kalendern med ett annat månadsnummer (och eventuellt år).

Här är ett exempel på vad vi kan göra vid klick på pilen för nästa månad:

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

Som ni ser används här funktionerna getNextYear och getNextMonth. Låt oss diskutera vad de borde göra.

Som namnet antyder hämtar funktionen getNextYear nästa år. Här menas att om det just nu är december, bör året ökas med 1 när man byter till nästa månad. Om det inte är december just nu, så bör funktionen helt enkelt returnera det aktuella året.

Funktionen getNextMonth bör hämta nästa månad. För alla månader utom december kommer den att lägga till ett till månadsnumret. För december kommer nästa månad att vara januari med nummer 0.

Liknande operationer bör göras när man klickar på knappen för föregående månad:

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

Implementera funktionaliteten för månadsbytesknapparna.

Se till att informationen ovanför kalendern överensstämmer med den visade månaden och året.