Pfeile zur Monatsänderung im Kalender mit JavaScript

Lassen Sie uns nun unter dem Kalender Pfeile zur Monatsänderung hinzufügen. Wir nehmen Änderungen am HTML-Code vor:

<div id="parent">
	<div id="calendar">
		<div class="info">Jan 2020</div>
		<table>
			<thead>
				<tr>
					<th>Mo</th>
					<th>Di</th>
					<th>Mi</th>
					<th>Do</th>
					<th>Fr</th>
					<th>Sa</th>
					<th>So</th>
				</tr>
			</thead>
			<tbody class="body"></tbody>
		</table>
		<div class="nav">
			<a href="#" class="prev">←</a>
			<a href="#" class="next">→</a>
		</div>
	</div>
</div>

Wir nehmen Änderungen am CSS-Code vor:

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

Wir holen die Referenzen auf die Pfeile in Variablen:

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

Diskussion

Lassen Sie uns nun besprechen, wie die Aufgabe zu lösen ist. Unser Kalendercode ist tatsächlich gut erweiterbar geschrieben: Wir haben die Funktion draw, die den Kalender für einen gegebenen Monat zeichnet. So können wir bei einem Klick auf den Pfeil den Kalender mit einer anderen Monatsnummer (und möglicherweise Jahr) neu zeichnen.

Hier ist ein Beispiel dafür, was wir bei einem Klick auf den Pfeil für den nächsten Monat tun können:

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

Wie Sie sehen können, werden hier die Funktionen getNextYear und getNextMonth verwendet. Lassen Sie uns besprechen, was sie tun sollen.

Wie der Name schon sagt, soll die Funktion getNextYear das nächste Jahr erhalten. Hier ist gemeint, dass, wenn es aktuell Dezember ist, dann sollte sich beim Wechsel zum nächsten Monat das Jahr um 1 erhöhen. Wenn es nicht Dezember ist, dann soll die Funktion einfach das aktuelle Jahr zurückgeben.

Die Funktion getNextMonth soll den nächsten Monat erhalten. Sie wird für alle Monate außer Dezember zur Monatsnummer eins addieren. Für den Dezember wird der nächste Monat Januar mit der Nummer 0 sein.

Ähnliche Operationen sollten bei einem Klick auf die Schaltfläche des vorherigen Monats durchgeführt werden:

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

Implementieren Sie die Funktion der Schaltflächen zur Monatsänderung.

Sorgen Sie dafür, dass die Information über dem Kalender dem angezeigten Monat und Jahr entspricht.