Piler for månedskifte i kalender på JavaScript

La oss nå lage piler under kalenderen for å skifte måned. Vi gjør endringer i HTML-koden:

<div id="parent">
	<div id="calendar">
		<div class="info">Jan 2020</div>
		<table>
			<thead>
				<tr>
					<th>ma</th>
					<th>ti</th>
					<th>on</th>
					<th>to</th>
					<th>fr</th>
					<th>lø</th>
					<th>sø</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 gjør endringer 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;
}

La oss hente lenker til pilene i variabler:

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

Diskusjon

La oss nå diskutere hvordan vi skal løse oppgaven. Faktisk er koden til kalenderen vår skrevet med god utvidelsesevne: vi har funksjonen draw, som tegner kalenderen for en gitt måned. Dermed kan vi, når vi klikker på en pil, tegne kalenderen på nytt med et annet månedsnummer (og muligens år).

Her er et eksempel på hva vi kan gjøre ved klikk på pilen for neste måned:

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

Som du ser, brukes funksjonene getNextYear og getNextMonth her. La oss diskutere hva de skal gjøre.

Som navnet tilsier, skal funksjonen getNextYear hente neste år. Her menes det at hvis det nå er desember, skal året økes med 1 når du bytter til neste måned. Hvis det ikke er desember nå, skal funksjonen bare returnere nåværende år.

Funksjonen getNextMonth skal hente neste måned. For alle måneder, unntatt desember, vil den legge til en enhet til månedsnummeret. For desember vil neste måned være januar med nummer 0.

Tilsvarende operasjoner bør utføres når du klikker på forrige måned-knappen:

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

Implementer funksjonaliteten til knappene for månedskifte.

Gjør slik at informasjonen over kalenderen samsvarer med måneden og året som vises.