जावास्क्रिप्ट में कैलेंडर के महीने बदलने के लिए तीर

आइए अब कैलेंडर के नीचे महीना बदलने के लिए तीर बनाएं। 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));
});

महीना बदलने के बटनों का काम लागू करें।

ऐसा करें कि कैलेंडर के ऊपर की जानकारी दिखाए गए महीने और साल से मेल खाए।