JavaScriptda kalendar oyini almashtirish uchun o'qlar

Keling, endi kalendar ostiga oyni almashtirish uchun o'qlarni qo'shamiz. HTML kodiga o'zgartirishlar kiritamiz:

<div id="parent">
	<div id="calendar">
		<div class="info">Yan 2020</div>
		<table>
			<thead>
				<tr>
					<th>du</th>
					<th>se</th>
					<th>ch</th>
					<th>pa</th>
					<th>ju</th>
					<th>sha</th>
					<th>ya</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 kodiga o'zgartirishlar kiritamiz:

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

O'qlar havolalarini o'zgaruvchilarga olaylik:

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

Muhokama

Keling, endi muammoni qanday hal qilishni muhokama qilaylik. Aslida bizning kalendar kodimiz yaxshi kengaytirilgan: bizda draw funktsiyasi mavjud, bu berilgan oy uchun kalendarni chizadi. Shunday qilib, o'qni bosganimizda biz kalendarni boshqa oy raqami bilan qayta chizishimiz mumkin (va ehtimol yil).

Keyingi oy o'qini bosish orqali nima qila olishimizga misol:

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

Ko'rib turganingizdek, bu yerda getNextYear va getNextMonth funktsiyalari ishlatiladi. Keling, ular nima qilishi kerakligini muhokama qilaylik.

Funktsiya nomidan ko'rinib turibdiki, getNextYear keyingi yilni oladi. Bu shuni anglatadiki, agar hozir dekabr bo'lsa, keyingi oyga o'tganda yil 1 ga oshirilishi kerak. Agar hozir dekabr bo'lmasa, unda funktsiya oddiygina joriy yilni qaytarishi kerak.

getNextMonth funktsiyasi keyingi oyni olishi kerak. Bu dekabrdan boshqa barcha oylar uchun oy raqamiga bittasini qo'shadi. Dekabr uchun esa keyingi oy 0 raqamli yanvar bo'ladi.

Oldingi oy tugmasini bosishda ham shunga o'xshash amallarni bajarish kerak:

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

Oyni almashtirish tugmalarining ishlashini amalga oshiring.

Kalendar ustidagi ma'lumot ko'rsatilayotgan oy va yilga mos keladigan qiling.