Mishale ya Kubadilisha Mwezi kwenye Kalenda kwa kutumia JavaScript

Hebu sasa tuweke mishale chini ya kalenda ya kubadilisha mwezi. Wacha tubadilishe msimbo wa HTML:

<div id="parent">
	<div id="calendar">
		<div class="info">Jan 2020</div>
		<table>
			<thead>
				<tr>
					<th>Jumatatu</th>
					<th>Jumanne</th>
					<th>Jumatano</th>
					<th>Alhamisi</th>
					<th>Ijumaa</th>
					<th>Jumamosi</th>
					<th>Jumapili</th>
				</tr>
			</thead>
			<tbody class="body"></tbody>
		</table>
		<div class="nav">
			<a href="#" class="prev">←</a>
			<a href="#" class="next">→</a>
		</div>
	</div>
</div>

Wacha tubadilishe msimbo wa 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;
}

Wacha tupate viungo vya mishale kwenye anuwai:

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

Majadiliano

Hebu sasa tujadilije jinsi ya kutatua tatizo. Kwa kweli msimbo wa kalenda yetu umeandikwa kwa njia inayoweza kupanuliwa kwa urahisi: tuna kitendakazi draw, kinachochora kalenda kwa mwezi uliopeanwa. Kwa hivyo wakati kubonyeza kishale tunaweza kuchora upya kalenda na namba tofauti ya mwezi (na huenda pia mwaka).

Huu ni mfano wa kile tunaweza kufanya kwa kubonyeza kishale cha mwezi unaofuata:

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

Kama unavyoona, hapa zinatumiwa vitendakazi getNextYear na getNextMonth. Wacha tujadili kile wanapaswa kufanya.

Kama inavyotokana na jina kitendakazi getNextYear kinapata mwaka unaofuata. Hapa inamaanisha kuwa, ikiwa kwa sasa ni Desemba, basi wakati wa kubadilisha mwezi unaofuata mwaka unapaswa kuongezeka kwa 1. Ikiwa kwa sasa sio Desemba, basi kitendakazi kinapaswa kurudisha mwaka wa sasa.

Kitendakazi getNextMonth kinapaswa kupata mwezi unaofuata. Kwa miezi yote, isipokuwa Desemba, itaongeza namba ya mwezi kwa moja. Na kwa Desemba mwezi unaofuata utakuwa Januari na namba 0.

Shughuli sawa inapaswa kufanywa wakati kubonyeza kitufe cha mwezi uliopita:

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

Tekeleza kazi ya vitufe vya kubadilisha mwezi.

Fanya habari juu ya kalenda ifanane na mwezi na mwaka unaoonyeshwa.