Kuukauden vaihto nuolilla kalenterissa JavaScriptillä

Tehdään nyt kalenterin alle nuolet kuukauden vaihtamista varten. Tehdään muutoksia HTML-koodiin:

<div id="parent">
	<div id="calendar">
		<div class="info">Tammi 2020</div>
		<table>
			<thead>
				<tr>
					<th>ma</th>
					<th>ti</th>
					<th>ke</th>
					<th>to</th>
					<th>pe</th>
					<th>la</th>
					<th>su</th>
				</tr>
			</thead>
			<tbody class="body"></tbody>
		</table>
		<div class="nav">
			<a href="#" class="prev">←</a>
			<a href="#" class="next">→</a>
		</div>
	</div>
</div>

Tehdään muutoksia CSS-koodiin:

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

Haetaan nuolien linkit muuttujiin:

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

Keskustelu

Keskustellaan nyt, kuinka ratkaista tehtävä. Itse asiassa kalenterimme koodi on kirjoitettu hyvin laajennettavaksi: meillä on funktio draw, joka piirtää kalenterin annetun kuukauden ajalle. Näin ollen nuolta napsautettaessa voimme piirtää kalenterin uudelleen toisella kuukauden numerolla (ja mahdollisesti vuodella).

Tässä on esimerkki siitä, mitä voimme tehdä seuraavan kuukauden nuolta napsautettaessa:

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

Kuten näette, tässä käytetään funktioita getNextYear ja getNextMonth. Keskustellaan, mitä niiden pitäisi tehdä.

Kuten nimestä seuraa, funktio getNextYear hakee seuraavan vuoden. Tällä tarkoitetaan, että jos nyt on joulukuu, niin seuraavaan kuukauteen vaihdettaessa vuoden pitäisi kasvaa 1:llä. Jos nyt ei ole joulukuu, niin funktion pitäisi yksinkertaisesti palauttaa nykyinen vuosi.

Funktion getNextMonth pitäisi hankkia seuraava kuukausi. Se kaikille kuukausille paitsi joulukuulle lisää kuukauden numeroon ykkösen. Joulukuulle seuraava kuukausi on tammikuu numerolla 0.

Vastaavat toimenpiteet tulee suorittaa, kun edellisen kuukauden painiketta napsautetaan:

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

Toteuta kuukauden vaihtopainikkeiden toiminta.

Tee niin, että kalenterin yläpuolella oleva tieto vastaa näytettyä kuukautta ja vuotta.