Panah untuk Mengganti Bulan di Kalender dengan JavaScript

Sekarang mari kita buat panah di bawah kalender untuk mengganti bulan. Mari kita ubah kode HTML:

<div id="parent">
	<div id="calendar">
		<div class="info">Jan 2020</div>
		<table>
			<thead>
				<tr>
					<th>sen</th>
					<th>sel</th>
					<th>rab</th>
					<th>kam</th>
					<th>jum</th>
					<th>sab</th>
					<th>min</th>
				</tr>
			</thead>
			<tbody class="body"></tbody>
		</table>
		<div class="nav">
			<a href="#" class="prev">←</a>
			<a href="#" class="next">→</a>
		</div>
	</div>
</div>

Mari kita ubah kode 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;
}

Mari dapatkan tautan panah ke dalam variabel:

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

Diskusi

Sekarang mari kita bahas bagaimana memecahkan masalahnya. Sebenarnya kode kalender kami ditulis dengan mudah diperluas: kami memiliki fungsi draw, yang menggambar kalender untuk bulan yang ditentukan. Jadi, saat menekan panah, kita bisa menggambar ulang kalender dengan nomor bulan yang berbeda (dan mungkin tahun).

Berikut adalah contoh yang dapat kita lakukan pada klik panah bulan berikutnya:

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

Seperti yang Anda lihat, di sini digunakan fungsi getNextYear dan getNextMonth. Mari kita bahas apa yang harus mereka lakukan.

Seperti namanya, fungsi getNextYear mendapatkan tahun berikutnya. Yang dimaksud di sini adalah bahwa, jika sekarang Desember, maka saat beralih ke bulan berikutnya, tahun harus bertambah sebesar 1. Jika sekarang bukan Desember, maka fungsi hanya harus mengembalikan tahun berjalan.

Fungsi getNextMonth harus mendapatkan bulan berikutnya. Untuk semua bulan, kecuali Desember, ia akan menambahkan satu ke nomor bulan. Sedangkan untuk Desember, bulan berikutnya adalah Januari dengan nomor 0.

Operasi serupa harus dilakukan saat menekan tombol bulan sebelumnya:

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

Implementasikan kerja tombol untuk mengganti bulan.

Buatlah agar informasi di atas kalender sesuai dengan bulan dan tahun yang ditampilkan.