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

განახორციელეთ თვის შეცვლის ღილაკების მუშაობა.

გახადეთ ისე, რომ ინფორმაცია კალენდრის ზემოთ შეესაბამებოდეს ნაჩვენებ თვეს და წელს.