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

Айды ауыстыру түймелерінің жұмысын жүзеге асырыңыз.

Календарь үстіндегі ақпарат көрсетілетін ай мен жылға сәйкес келетіндей етіңіз.