Βέλη για αλλαγή μήνα στο ημερολόγιο σε JavaScript

Ας βάλουμε τώρα κάτω από το ημερολόγιο βέλη για αλλαγή μήνα. Ας κάνουμε αλλαγές στον κώδικα HTML:

<div id="parent">
	<div id="calendar">
		<div class="info">Ιαν 2020</div>
		<table>
			<thead>
				<tr>
					<th>Δε</th>
					<th>Τρ</th>
					<th>Τε</th>
					<th>Πε</th>
					<th>Πα</th>
					<th>Σα</th>
					<th>Κυ</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:

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

Ας πάρουμε τους συνδέσμους για τα βέλη σε μεταβλητές:

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

Συζήτηση

Ας συζητήσουμε τώρα πώς να λύσουμε το πρόβλημα. Στην πραγματικότητα, ο κώδικας του ημερολογίου μας είναι γραμμένος με καλή επεκτασιμότητα: έχουμε τη συνάρτηση draw, που σχεδιάζει το ημερολόγιο για έναν συγκεκριμένο μήνα. Έτσι, όταν πατάμε σε ένα βέλος μπορούμε να ξανασχεδιάσουμε το ημερολόγιο με διαφορετικό αριθμό μήνα (και πιθανώς έτους).

Ακολουθεί ένα παράδειγμα του τι μπορούμε να κάνουμε με κλικ στο βέλος για τον επόμενο μήνα:

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

Όπως βλέπετε, εδώ χρησιμοποιούνται συναρτήσεις getNextYear και getNextMonth. Ας συζητήσουμε τι πρέπει να κάνουν.

Όπως υποδηλώνει το όνομα, η συνάρτηση getNextYear παίρνει το επόμενο έτος. Εδώ εννοείται ότι, αν τώρα είναι Δεκέμβριος, τότε κατά την εναλλαγή στον επόμενο μήνα το έτος θα πρέπει να αυξηθεί κατά 1. Αν όμως τώρα δεν είναι Δεκέμβριος, τότε η συνάρτηση απλά πρέπει να επιστρέψει το τρέχον έτος.

Η συνάρτηση getNextMonth πρέπει να παίρνει τον επόμενο μήνα. Για όλους τους μήνες, εκτός από τον Δεκέμβριο, θα προσθέτει μονάδα στον αριθμό του μήνα. Ενώ για τον Δεκέμβριο ο επόμενος μήνας θα είναι ο Ιανουάριος με αριθμό 0.

Παρόμοιες πράξεις πρέπει να γίνουν όταν πατηθεί το κουμπί για τον προηγούμενο μήνα:

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

Υλοποιήστε τη λειτουργία των κουμπιών αλλαγής μήνα.

Κάντε έτσι ώστε οι πληροφορίες πάνω από το ημερολόγιο να αντιστοιχούν στον μήνα και το έτος που εμφανίζονται.