Тири календар барои иваз кардани моҳ дар JavaScript

Биёед ҳоло зери календар тирҳоро барои иваз кардани моҳ созем. Тағирот дар рамзи HTML меоварем:

<div id="parent">
	<div id="calendar">
		<div class="info">Янв 2020</div>
		<table>
			<thead>
				<tr>
					<th>дш</th>
					<th>сш</th>
					<th>чш</th>
					<th>пш</th>
					<th>ҷм</th>
					<th>шн</th>
					<th>як</th>
				</tr>
			</thead>
			<tbody class="body"></tbody>
		</table>
		<div class="nav">
			<a href="#" class="prev">←</a>
			<a href="#" class="next">→</a>
		</div>
	</div>
</div>

Тағирот дар рамзи 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;
}

Истинодҳоро ба тирҳо дар тағирёбандаҳо мегирем:

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

Баҳс

Биёед ҳоло дар бораи он, ки чӣ гуна масъаларо ҳал кунем, баҳс кунем. Дар асл, рамзи календари мо хуб васеъшаванда навишта шудааст: мо функсияи draw дорем, ки календарро барои моҳи додашуда мекашад. Аз ин рӯ, ҳангоми фишурдани тир мо метавонем календарро бо рақами дигари моҳ (ва эҳтимол сол) аз нав кашем.

Инчунин мисолест аз он чи ки мо метавонем дар заминаи клик кардан ба тири моҳи навбатӣ анҷом диҳем:

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

Чунон ки шумо мебинед, дар ин ҷо функсияҳо getNextYear ва getNextMonth истифода мешаванд. Биёед дар бораи он, ки онҳо чӣ кор бояд кунанд, баҳс кунем.

Чунон ки аз ном бармеояд, функсияи getNextYear соли навбатиро мегирад. Дар ин ҷо маънои он аст, ки агар ҳоло декабрь бошад, пас ҳангоми гузариш ба моҳи навбатӣ сол бояд зиёд карда шавад ба 1. Агар ҳоло декабрь набошад, пас функсия танҳо бояд соли ҷориро баргардонад.

Функсияи getNextMonth бояд моҳи навбатиро гирад. Он барои ҳама моҳҳо, ҷуз декабрь, ба рақами моҳ воҳид илова мекунад. Вале барои декабрь моҳи навбатӣ январ бо рақами 0 хоҳад буд.

Амалҳои монанд бояд ҳангоми фишурдани тугмаи моҳи қаблӣ иҷро карда шаванд:

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

Кори тугмаҳои иваз кардани моҳро татбиқ кунед.

Чунон кунед, ки иттилоти болои календар ба моҳ ва соли намоишдодашуда мувофиқат кунад.