Pyle vir die verandering van maand in kalender op JavaScript

Laat ons nou pyle onder die kalender maak vir die verandering van maand. Kom ons maak veranderinge in die HTML-kode:

<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>sa</th>
					<th>so</th>
				</tr>
			</thead>
			<tbody class="body"></tbody>
		</table>
		<div class="nav">
			<a href="#" class="prev">←</a>
			<a href="#" class="next">→</a>
		</div>
	</div>
</div>

Kom ons maak veranderinge in die CSS-kode:

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

Laat ons die skakels na die pyle in veranderlikes kry:

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

Bespreking

Laat ons nou bespreek hoe om die probleem op te los. Eintlik is die kode van ons kalender goed uitgebrei geskryf: ons het die funksie draw, wat die kalender vir 'n gegewe maand teken. Dus, wanneer daar op die pyl geklik word, kan ons die kalender met 'n ander maandnommer herteken (en moontlik jaar).

Hier is 'n voorbeeld van wat ons kan doen by 'n klik op die pyl vir die volgende maand:

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

Soos jy kan sien, word die funksies getNextYear en getNextMonth hier gebruik. Kom ons bespreek wat hulle moet doen.

Soos uit die naam blyk, kry die funksie getNextYear die volgende jaar. Dit beteken dat, as dit nou Desember is, moet die jaar met 1 vermeerder word wanneer na die volgende maand oorgeskakel word. As dit nie Desember is nie, dan moet die funksie net die huidige jaar teruggee.

Die funksie getNextMonth moet die volgende maand kry. Vir alle maande, behalwe Desember, sal dit een by die maandnommer voeg. Vir Desember sal die volgende maand Januarie wees met nommer 0.

Soortgelyke bewerkings moet gedoen word wanneer op die knoppie vir die vorige maand gedruk word:

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

Implementeer die werk van die knoppies vir die verandering van maand.

Maak dit so dat die inligting bokant die kalender ooreenstem met die vertoonde maand en jaar.