JavaScript-de kalendar aý üýtgetmek üçin oklar

Indi kalendaryň aşagynda aý üýtgetmek üçin oklar edeliň. HTML kodda üýtgeşmeler girizeliň:

<div id="parent">
	<div id="calendar">
		<div class="info">Ýan 2020</div>
		<table>
			<thead>
				<tr>
					<th>Du</th>
					<th>Si</th>
					<th>Ça</th>
					<th>Pe</th>
					<th>An</th>
					<th>Şe</th>
					<th>Ýe</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 kodda üýtgeşmeler girizeliň:

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

Oklara çykgytlary üýtgeýänlere alyň:

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

Gürrüň

Indi meseläni çözmek üçin gürrüň geçireliň. Aslynda kalendarymyzyň kody gowy giňeldilip ýazyldy: bizde draw funksiýasy bar, bu funksiýa kesgitlenen aý üçin kalendary çyzýar. Şeýlelikde ok basylanda biz başga aý belgisi (belki hem ýyl) bilen kalendary täzeden çyzyp bileris.

Indiki aý okuny basanda näme edip bilerdigimiziň mysaly:

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

Görşüňiz ýaly, bu ýerde getNextYear we getNextMonth funksiýalary ulanylýar. Olaryň näme etmelidigini gürrüň edeliň.

Adyndan görşüňiz ýaly getNextYear funksiýasy indiki ýyly alyar. Bu ýerde aňladylan şu, häzir Dekabr bolsa, indiki aýa geçende ýyl 1 artmaly. Ýöne häzir Dekabr bolmasa, funksiýa diňe häzirki ýyly yzyna gaýtarmaly.

getNextMonth funksiýasy indiki aýy almaly. Bu funksiýa Dekabrdan başga ähli aýlar üçin aý belgisine birlik goşar. Dekabr üçin bolsa indiki aý 0 belgili Ýanwar bolar.

Şuňa meňzeş amallary öňki aý düwmesine basylanda amala aşyrmaly:

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

Aý üýtgetmek düwmeleriniň işleýşini amala aşyryň.

Kalendaryň üstündäki maglumat görkezilýän aý we ýyla gabat gelýändigine göz ýetiriň.