Shigjetat për ndryshimin e muajit në kalendar në JavaScript

Tani le të bëjmë shigjeta për ndryshimin e muajit nën kalendar. Le të bëjmë ndryshime në kodin HTML:

<div id="parent">
	<div id="calendar">
		<div class="info">Jan 2020</div>
		<table>
			<thead>
				<tr>
					<th>e hënë</th>
					<th>e martë</th>
					<th>e mërkurë</th>
					<th>e enjte</th>
					<th>e premte</th>
					<th>e shtunë</th>
					<th>e diel</th>
				</tr>
			</thead>
			<tbody class="body"></tbody>
		</table>
		<div class="nav">
			<a href="#" class="prev">←</a>
			<a href="#" class="next">→</a>
		</div>
	</div>
</div>

Le të bëjmë ndryshime në kodin CSS:

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

Le të marrim lidhjet për shigjetat në variabla:

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

Diskutim

Tani le të diskutojmë se si ta zgjidhim këtë detyrë. Në fakt kodi i kalendarit tonë është shkruar në mënyrë të zgjerueshme: ne kemi funksionin draw, që vizaton kalendarin për një muaj të caktuar. Kështu, kur klikohet në shigjetë, ne mund të rivizatojmë kalendarin me një numër tjetër muaji (dhe ndoshta viti).

Ja një shembull i asaj që mund të bëjmë kur klikohet në shigjetën e muajit të ardhshëm:

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

Siç e shihni, këtu përdoren funksionet getNextYear dhe getNextMonth. Le të diskutojmë se çfarë duhet të bëjnë ato.

Siç nënkupton edhe emri, funksioni getNextYear merr vitin e ardhshëm. Këtu nënkuptohet se, nëse aktualisht është dhjetor, atëherë kur kalojmë në muajin e ardhshëm, viti duhet të rritet me 1. Nëse aktualisht nuk është dhjetor, atëherë funksioni thjesht duhet të kthejë vitin aktual.

Funksioni getNextMonth duhet të marrë muajin e ardhshëm. Ai për të gjithë muajt, përveç dhjetorit, do të shtojë njësi në numrin e muajit. Ndërsa për dhjetorin, muaji i ardhshëm do të jetë janari me numrin 0.

Operacione të ngjashme duhet të kryhen kur klikohet butoni i muajit të mëparshëm:

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

Implementoni funksionimin e butonave për ndryshimin e muajit.

Bëni që informacioni mbi kalendarin të korrespondojë me muajin dhe vitin e shfaqur.