Mũi tên chuyển tháng trong lịch bằng JavaScript

Bây giờ hãy tạo các mũi tên để chuyển tháng bên dưới lịch. Chúng ta sẽ thay đổi mã HTML:

<div id="parent">
	<div id="calendar">
		<div class="info">Tháng 1 2020</div>
		<table>
			<thead>
				<tr>
					<th>Thứ 2</th>
					<th>Thứ 3</th>
					<th>Thứ 4</th>
					<th>Thứ 5</th>
					<th>Thứ 6</th>
					<th>Thứ 7</th>
					<th>Chủ nhật</th>
				</tr>
			</thead>
			<tbody class="body"></tbody>
		</table>
		<div class="nav">
			<a href="#" class="prev">←</a>
			<a href="#" class="next">→</a>
		</div>
	</div>
</div>

Chúng ta sẽ thay đổi mã 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;
}

Lấy các liên kết mũi tên vào các biến:

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

Thảo luận

Bây giờ hãy thảo luận cách giải quyết nhiệm vụ. Thực tế, mã lịch của chúng ta được viết rất dễ mở rộng: chúng ta có hàm draw, vẽ lịch cho một tháng được chỉ định. Do đó, khi nhấp vào mũi tên, chúng ta có thể vẽ lại lịch với một số tháng khác (và có thể là năm khác).

Đây là ví dụ về những gì chúng ta có thể làm khi nhấp vào mũi tên tháng tiếp theo:

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

Như bạn thấy, ở đây sử dụng các hàm getNextYear và getNextMonth. Hãy thảo luận xem chúng phải làm gì.

Như tên gọi, hàm getNextYear lấy năm tiếp theo. Ở đây có nghĩa là nếu bây giờ là tháng 12, thì khi chuyển sang tháng tiếp theo, năm phải tăng lên 1. Nếu bây giờ không phải tháng 12, thì hàm chỉ cần trả về năm hiện tại.

Hàm getNextMonth phải lấy tháng tiếp theo. Đối với tất cả các tháng, trừ tháng 12, nó sẽ cộng thêm một vào số tháng. Còn đối với tháng 12, tháng tiếp theo sẽ là tháng 1 với số 0.

Các thao tác tương tự nên được thực hiện khi nhấp vào nút tháng trước:

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

Thực hiện chức năng của các nút chuyển tháng.

Hãy đảm bảo thông tin phía trên lịch tương ứng với tháng và năm được hiển thị.