JavaScript'te Takvimde Ay Değiştirmek için Oklar

Şimdi takvimin altına ay değiştirmek için oklar yapalım. HTML kodunda değişiklikler yapalım:

<div id="parent">
	<div id="calendar">
		<div class="info">Oca 2020</div>
		<table>
			<thead>
				<tr>
					<th>pzt</th>
					<th>sal</th>
					<th>çar</th>
					<th>per</th>
					<th>cum</th>
					<th>cmt</th>
					<th>paz</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 kodunda değişiklikler yapalım:

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

Okların bağlantılarını değişkenlere alalım:

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

Tartışma

Şimdi sorunu nasıl çözeceğimizi tartışalım. Aslında takvim kodumuz iyi genişletilebilir şekilde yazılmış: bizim draw fonksiyonumuz var, bu fonksiyon verilen ay için takvimi çizer. Böylece oka tıklandığında takvimi farklı bir ay numarası (ve muhtemelen yıl) ile yeniden çizebiliriz.

Sonraki ay okuna tıklandığında yapabileceklerimizin bir örneği:

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

Gördüğünüz gibi, burada getNextYear ve getNextMonth fonksiyonları kullanılıyor. Ne yapmaları gerektiğini tartışalım.

Adından da anlaşılacağı gibi getNextYear fonksiyonu sonraki yılı alır. Burada kastedilen, şu an Aralık ayı ise, sonraki aya geçerken yılın 1 artması gerektiğidir. Eğer şu an Aralık değilse, fonksiyon sadece mevcut yılı döndürmelidir.

getNextMonth fonksiyonu sonraki ayı almalıdır. Aralık dışındaki tüm aylar için ay numarasına bir ekleyecektir. Aralık için ise sonraki ay 0 numaralı Ocak olacaktır.

Önceki ay butonuna tıklandığında benzer işlemler yapılmalıdır:

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

Ay değiştirme butonlarının çalışmasını uygulayın.

Takvimin üzerindeki bilginin görüntülenen aya ve yıla karşılık gelmesini sağlayın.