Table of Contents

एक कस्टम कैलेंडर एप्लिकेशन का निर्माण जावास्क्रिप्ट, ब्राउज़र दस्तावेज़ ऑब्जेक्ट मॉडल (DOM) की अपनी समझ को गहरा करने का एक शानदार तरीका है, और क्लाइंट-साइड डेटा दृढ़ता। वेब स्टोरेज एपीआई का लाभ उठाने से - विशेष रूप से स्थानीय भंडारण - आप एक पूरी तरह कार्यात्मक, घटना संचालित कैलेंडर बना सकते हैं जो ब्राउज़र में पूरी तरह से बैकेंड सर्वर या डेटाबेस की आवश्यकता के बिना चलता है। यह ट्यूटोरियल आपको हर कदम से चलता है, HTML को ड्रैग-एंड-ड्रॉप इवेंट मैनेजमेंट जैसी उन्नत सुविधाओं को लागू करने के लिए तैयार करता है।

क्यों एक कस्टम कैलेंडर का निर्माण?

पूर्व निर्मित कैलेंडर पुस्तकालयों (जैसे फुलकैलेंडर या डेपपिलोट) त्वरित समाधान प्रदान करते हैं, लेकिन स्क्रैच से एक का निर्माण आपको उपयोगकर्ता इंटरफ़ेस, डेटा हैंडलिंग और प्रदर्शन पर पूरा नियंत्रण देता है। आप कोर जावास्क्रिप्ट अवधारणाओं जैसे ऑब्जेक्ट, इवेंट डेलिगेशन, और API के साथ हाथ से अनुभव प्राप्त करते हैं। परिणामस्वरूप ऐप को एक प्रोजेक्ट मैनेजमेंट टूल, एक बुकिंग सिस्टम या एक व्यक्तिगत पत्रिका में विस्तारित किया जा सकता है।

HTML संरचना की स्थापना

एक साफ एचटीएमएल कंकाल के साथ शुरू करें कैलेंडर में तीन मुख्य घटक होते हैं: एक नेविगेशन बार (बदलते महीनों के लिए), एक ग्रिड कंटेनर (दिन कोशिकाओं के लिए), और एक घटना इनपुट फॉर्म। उपयोग करें आसान स्टाइल और स्क्रिप्टिंग के लिए शब्द के साथ तत्व।

<div id="calendar">
 <div class="calendar-header">
 <button id="prevBtn">&larr;</button>
 <h2 id="monthYear"></h2>
 <button id="nextBtn">&rarr;</button>
 </div>
 <div class="calendar-grid"></div>
 <div class="event-form">
 <input type="text" id="eventInput" placeholder="Add an event..." />
 <button id="saveEvent">Save</button>
 </div>
</div>

को जावास्क्रिप्ट द्वारा गतिशील रूप से पॉप्युलेट किया जाएगा। मोबाइल-अनुकूल लेआउट के लिए, 7-कॉलम सीएसएस ग्रिड ( week के प्रत्येक दिन के लिए एक) का उपयोग करने पर विचार करें। दिन के नामों (Sun-Sat) के लिए पहली पंक्ति आरक्षित करें।

सीएसएस के साथ कैलेंडर स्टाइल करना

स्वच्छ, उत्तरदायी सीएसएस कच्चे एचटीएमएल को एक प्रयोग योग्य इंटरफेस में बदल देता है। कैलेंडर ग्रिड के लिए एक सीएसएस ग्रिड का उपयोग करें, सेटिंग । महीने के पहले से पहले दिनों के लिए स्पेसर जोड़ें। पहुंच के लिए, पर्याप्त रंग विपरीत सुनिश्चित करें और ]] इंटरैक्टिव तत्वों पर शैलियों को शामिल करें। एक न्यूनतम स्टाइलशीट नीचे दिखाया गया है (इनलाइन या लिंक्ड)।

.calendar-grid {
 display: grid;
 grid-template-columns: repeat(7, 1fr);
 gap: 2px;
}
.day-cell {
 min-height: 80px;
 border: 1px solid #ccc;
 padding: 4px;
 position: relative;
}
.day-cell.today {
 background-color: #eef;
}
.event {
 font-size: 0.8em;
 background: #4caf50;
 color: #fff;
 padding: 2px 4px;
 margin: 1px 0;
 border-radius: 3px;
 cursor: pointer;
}

संकीर्ण स्क्रीन पर सेल आकार को कम करने के लिए मीडिया प्रश्नों का उपयोग करें और घटना पाठ को छिपाने और केवल एक गिनती दिखाने पर विचार करें।

कोर जावास्क्रिप्ट: कैलेंडर ग्रिड को उत्पन्न करना

सभी गतिशील प्रतिपादन जावास्क्रिप्ट में रहता है। केंद्रीय कार्य, , महीने के पहले दिन और दिनों की कुल संख्या की गणना करता है। सप्ताह के सूचकांक (0 = रविवार) प्राप्त करने के लिए का उपयोग करें। फिर महीने के अंतिम दिन 1 से 1 तक एक लूप में कोशिकाएं उत्पन्न करें।

दिनांक वस्तु के साथ कार्य करना

] वस्तु कैलेंडर लॉजिक की रीढ़ है। एक महीने के अंतिम दिन प्राप्त करने के लिए, का उपयोग करें ( अगले महीने का दिन 0 वर्तमान महीने का अंतिम दिन देता है)। वर्तमान महीने और वर्ष वैश्विक चर में स्टोर करें ताकि नेविगेशन उन्हें अपडेट कर सके।

ग्रिड का निर्माण

function renderCalendar() {
 const grid = document.querySelector('.calendar-grid');
 grid.innerHTML = '';

 const firstDay = new Date(currentYear, currentMonth, 1).getDay();
 const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();

 // Add empty cells for days before the 1st
 for (let i = 0; i < firstDay; i++) {
 const empty = document.createElement('div');
 empty.className = 'day-cell empty';
 grid.appendChild(empty);
 }

 // Generate day cells
 for (let day = 1; day <= daysInMonth; day++) {
 const cell = document.createElement('div');
 cell.className = 'day-cell';
 cell.dataset.date = `${currentYear}-${currentMonth + 1}-${day}`;

 const dateSpan = document.createElement('span');
 dateSpan.textContent = day;
 cell.appendChild(dateSpan);

 // Highlight today
 const today = new Date();
 if (currentYear === today.getFullYear() && currentMonth === today.getMonth() && day === today.getDate()) {
 cell.classList.add('today');
 }

 // Load events for this date
 loadEvents(cell);

 grid.appendChild(cell);
 }
}

हेडर में महीने / वर्ष के प्रदर्शन को अद्यतन करें:

महीनों के बीच नेविगेशन

पिछले और अगले बटन पर क्लिक इवेंट श्रोता संलग्न करें। वृद्धि या decrement ], यदि आवश्यक हो तो वर्ष को समायोजित करना (उदाहरण के लिए, दिसंबर के बाद अगले साल जनवरी तक आते हैं)। चर अद्यतन करने के बाद, को फिर से कॉल करें।

document.getElementById('prevBtn').addEventListener('click', () => {
 currentMonth--;
 if (currentMonth < 0) {
 currentMonth = 11;
 currentYear--;
 }
 renderCalendar();
});

document.getElementById('nextBtn').addEventListener('click', () => {
 currentMonth++;
 if (currentMonth > 11) {
 currentMonth = 0;
 currentYear++;
 }
 renderCalendar();
});

अतिरिक्त प्रयोज्यता के लिए, एक जोड़ें Today बटन जो वर्तमान महीने के दृष्टिकोण को रीसेट करता है और वर्तमान दिन को हाइलाइट करता है।

स्थानीय भंडारण के साथ घटनाओं को पुनः प्राप्त करना

स्थानीय भंडारण एक सरल कुंजी मूल्य स्टोर प्रदान करता है जो ब्राउज़र को पुनः आरंभ करने में बच जाता है। एक सुसंगत कुंजी पैटर्न का प्रयोग करें, उदाहरण के लिए, ], जो JSON की घटनाओं की सारणी को संग्रहीत करता है। , ], ], और ] जैसे गुण शामिल करें।

एक नया इवेंट सेविंग

जब उपयोगकर्ता "सेव" बटन पर क्लिक करता है, तो इनपुट मान और वर्तमान में चयनित तिथि को कैप्चर करता है। (आप एक तारीख पिकर जोड़ सकते हैं या पता लगा सकते हैं कि कौन सा दिन सेल क्लिक किया गया है।) स्थानीय भंडारण से उस तारीख के लिए किसी भी मौजूदा घटनाओं को पुनर्प्राप्त करें, नई घटना को धक्का दें, फिर वापस बचाओ।

function saveEvent(dateKey, eventText) {
 const existing = JSON.parse(localStorage.getItem(dateKey)) || [];
 existing.push({ id: Date.now(), text: eventText, time: new Date().toLocaleTimeString() });
 localStorage.setItem(dateKey, JSON.stringify(existing));
 renderCalendar(); // refresh to show new event
}

दिन कक्ष में घटनाओं लोड हो रहा है

के अंदर, प्रत्येक गैर-खाली दिन सेल के लिए, उस तारीख कुंजी के लिए स्थानीय भंडारण को क्वेरी करने वाले एक कार्य को बुलाओ। यदि घटनाएं मौजूद हैं, तो उनके माध्यम से लूप करें और उन्हें ]]] के लिए तत्वों को सेल में भेजना।

function loadEvents(cell) {
 const dateKey = cell.dataset.date;
 const events = JSON.parse(localStorage.getItem(dateKey));
 if (!events) return;

 events.forEach(evt => {
 const eventDiv = document.createElement('div');
 eventDiv.className = 'event';
 eventDiv.textContent = evt.text;
 eventDiv.dataset.id = evt.id;
 // Optional: add a delete button
 cell.appendChild(eventDiv);
 });
}

हटाने और संपादन घटनाओं

हटाने के लिए, प्रत्येक घटना तत्व (या घटना प्रतिनिधिमंडल का उपयोग) पर क्लिक इवेंट संलग्न करें। उस तारीख के लिए सरणी को पुनर्प्राप्त करें, अपने द्वारा घटना को फ़िल्टर करें, और अद्यतन सरणी को स्थानीय भंडारण पर वापस बचाएँ। संपादन को घटना को दोहराने, नए पाठ के लिए प्रेरित करने और सरणी को अद्यतन करने के द्वारा किया जा सकता है।

कार्यक्षमता बढ़ाने के लिए उन्नत सुविधाएँ

एक बार जब मूल कैलेंडर काम कर रहा है, तो आप उन सुविधाओं को जोड़ सकते हैं जो उपयोगकर्ता के अनुभव में काफी सुधार करते हैं।

प्रकार से रंग कोडिंग इवेंट

उपयोगकर्ताओं को श्रेणियों (जैसे, कार्य, व्यक्तिगत, स्वास्थ्य) को असाइन करने की अनुमति दें। स्थानीय भंडारण में एक फ़ील्ड स्टोर करें। सीएसएस में, ] जैसे वर्गों को परिभाषित करें और उन्हें गतिशील रूप से लागू करें।

ड्रैग-एंड-ड्रॉप रिशेड्यूलिंग

दिन की कोशिकाओं के बीच घटनाओं को स्थानांतरित करने के लिए HTML5 ड्रैग और ड्रॉप एपीआई का उपयोग करें। जब एक घटना को एक अलग दिन छोड़ दिया जाता है, तो स्थानीय भंडारण में तारीख कुंजी को अद्यतन करें: इस घटना को अपनी मूल तारीख सारणी से हटा दें और इसे नई तारीख की सरणी में धक्का दें।

पुनरावृत्ति कार्यक्रम (सप्ताहिक / मासिक)

एक घटना को बचाने के दौरान एक "Repeat" विकल्प जोड़ें। लोडिंग फंक्शन में, गणना करें कि वर्तमान तिथि पुनरावृत्ति नियम (जैसे हर सोमवार) से मेल खाती है और तदनुसार घटना को प्रदर्शित करती है। दोहराव से बचने के लिए एक अलग स्थानीय स्टोरेज कुंजी में स्टोर पुनरावृत्ति नियम।

सप्ताह देखें और मिनी कैलेंडर

एक सप्ताह का दृश्य केवल वर्तमान सप्ताह के दिनों को अधिक क्षैतिज स्थान से दिखाता है। एक छोटा महीना-view मिनी कैलेंडर उपयोगकर्ताओं को किसी भी तारीख को जल्दी से कूदने में मदद करता है।

कैलेंडर उत्तरदायी और सुलभ बनाना

विभिन्न स्क्रीन आकारों पर कैलेंडर का परीक्षण करें। का प्रयोग करें बहुत छोटी स्क्रीन पर खड़ी दिन की कोशिकाओं को खड़ी करने के लिए या पैडिंग को कम करने के लिए क्वेरीज़। सुनिश्चित करें कि सभी इंटरैक्टिव तत्व कीबोर्ड-सहायक हैं: एंटर और एस्केप के लिए आयोजन। का उपयोग करें बटन और लाइव क्षेत्रों पर महीने में परिवर्तन और घटना के जोड़ की घोषणा करने के लिए।

प्रदर्शन और डेटा प्रबंधन युक्तियाँ

  • ]Batched Storage Writes: प्रत्येक घटना के संचालन के लिए स्थानीय लेखन के बजाय, पूरे महीने की घटनाओं को जावास्क्रिप्ट ऑब्जेक्ट में कैश करें और समय-समय पर फ्लश परिवर्तन करें।
  • ]लिमिट इवेंट साइज : इवेंट ऑब्जेक्ट्स को छोटा रखें। बड़े स्ट्रिंग्स या द्विआधारी डेटा को संग्रहीत करने से बचें।
  • ]Fallback for Storage Limits: स्थानीय भंडारण आम तौर पर 5-10 MB पर बंद किया जाता है। जब भंडारण लगभग पूरा हो जाता है तब वार्ड उपयोगकर्ताओं को।
  • ]]Use IndexedDB for Large Datasets: यदि आपका कैलेंडर हजारों घटनाओं को पकड़ेगा, तो बेहतर प्रदर्शन और क्वेरी क्षमताओं के लिए ]]IndexedDB]]]] पर विचार करें।

निष्कर्ष

जावास्क्रिप्ट और स्थानीय भंडारण के साथ एक कस्टम कैलेंडर ऐप बनाना एक पुरस्कृत परियोजना है जो आपके फ्रंट-एंड कौशल को तेज करती है। आप डीओएम में हेरफेर करना सीखते हैं, तारीखों के साथ काम करते हैं, बिना किसी सर्वर के राज्य का प्रबंधन करते हैं और उपयोगकर्ता बातचीत को संभालते हैं। कोडबेस को सर्वर सिंक, क्लाउड बैकअप या बाहरी कैलेंडर के साथ एकीकरण के साथ बढ़ाया जा सकता है गूगल कैलेंडर एपीआई . बुनियादी ग्रिड के साथ शुरू करें, दृढ़ता जोड़ें, और फिर ड्रैग-एंड-ड्रॉप और आवर्ती घटनाओं जैसी सुविधाओं पर परत। परिणाम एक अनुरूप कैलेंडर है जो वास्तव में आपको इसकी आवश्यकता कैसे है।

आगे पढ़ने के लिए, MDN पर स्टोरेज एपीआई प्रलेखन और Drag और ड्रॉप एपीआई ]] का पता लगाएं।