Table of Contents

खींचें और ड्रॉप के साथ जावास्क्रिप्ट इवेंट कैलेंडर का परिचय

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

कोर आर्किटेक्चर: डेटा स्ट्रक्चर्स और कैलेंडर रेंडरिंग

कार्यक्रम का मॉडल

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

{
 id: 1,
 title: "Team Standup",
 start: "2025-10-27T09:00:00",
 end: "2025-10-27T09:30:00",
 color: "#4A90D9",
 location: "Room 301"
}

एक mutable सरणी में स्टोर की घटनाओं या एक राज्य प्रबंधन पैटर्न का उपयोग करें। जब एक घटना एक नए दिन या समय पर गिरा दिया जाता है, केवल और गुण परिवर्तन.

कैलेंडर ग्रिड को प्रस्तुत करना

मासिक ग्रिड आम तौर पर सप्ताह के लिए पंक्तियों के साथ 7 कॉलम टेबल (या फ्लेक्सबॉक्स / ग्रिड लेआउट) होता है। वर्तमान महीने के पहले दिन और दिनों की संख्या पर आधारित दिन कोशिकाओं को उत्पन्न करें। प्रत्येक सेल को उस तारीख के लिए घटनाओं की एक सारणी रखना चाहिए।

साप्ताहिक या दैनिक विचारों के लिए, ग्रिड को समय स्लॉट में विभाजित करें (उदाहरण के लिए, 30 मिनट अंतराल)। प्रतिपादन तर्क अधिक जटिल हो जाता है लेकिन एक ही सिद्धांत का पालन करता है: एक दृश्य स्थिति के लिए एक समय संसाधन का नक्शा।

HTML5 API के साथ ड्रैग-एंड-ड्रॉप को कार्यान्वित करना

मूल HTML5 खींचें और ड्रॉप एपीआई कंटेनरों के बीच चलती तत्वों के लिए नींव प्रदान करता है। यह व्यापक रूप से समर्थित है और इसके लिए बाहरी निर्भरता की आवश्यकता नहीं है। हालांकि, यह मोबाइल उपकरणों पर quirks जाना जाता है; स्पर्श समर्थन के लिए आपको पॉलीफिल या पुस्तकालय की आवश्यकता हो सकती है Sortable.js । यदि आप वेनिला चुनते हैं, तो यहां एक उत्पादन-तैयार दृष्टिकोण है।

तत्वों को बनाने के लिए

घटना तत्वों पर सेट करें। ] हैंडलर में, का उपयोग करके घटना ID को स्टोर करें और वैकल्पिक रूप से एक खींचें छवि सेट करें।

eventElement.addEventListener('dragstart', (e) => {
 e.dataTransfer.setData('text/plain', event.id);
 e.dataTransfer.effectAllowed = 'move';
 // Add a class to visually indicate dragging
 e.target.classList.add('dragging');
});

ड्रॉप जोन को परिभाषित करना

प्रत्येक दिन सेल (या समय स्लॉट) को ( के साथ छोड़ने की अनुमति देने के लिए) और ]] के लिए सुनना चाहिए। ड्रॉप हैंडलर इवेंट आईडी को पुनर्प्राप्त करता है, अपने डेटा स्टोर में घटना का पता लगाता है, और इसकी तारीख अपडेट करता है। फिर कैलेंडर को फिर से प्रस्तुत करें या DOM तत्व को स्थानांतरित करें।

dayCell.addEventListener('dragover', (e) => {
 e.preventDefault();
 e.dataTransfer.dropEffect = 'move';
});

dayCell.addEventListener('drop', (e) => {
 e.preventDefault();
 const eventId = Number(e.dataTransfer.getData('text/plain'));
 const targetDate = e.currentTarget.dataset.date; // e.g. "2025-10-27"

 // Update the event in your data array
 const event = events.find(ev => ev.id === eventId);
 if (event) {
 event.start = new Date(targetDate + 'T' + extractTime(event.start));
 event.end = new Date(targetDate + 'T' + extractTime(event.end));
 reRenderCalendar();
 }
});

एज मामले

  • क्रॉस-माह की बूंदें: जब एक महीने से दूसरे महीने तक एक घटना को खींचते हैं, तो कैलेंडर व्यू अपडेट को तदनुसार सुनिश्चित करें या लक्ष्य महीने में नेविगेट करें।
  • Overlapping event: एक बूंद के बाद, समय संघर्ष के लिए जाँच करें। यदि ओवरलैपिंग की अनुमति नहीं है, तो ड्रॉप को फिर से बदलें और संदेश दिखाएं।
  • Cancel drop: ]]] ]] ]]] ] ]]]]] ]]]]]] ]]]]]]]]] ]]Cancel drop: ]]]][FLT:[[]]]]]]]]]]]]]]]]]]]]]]]]]]]]][[[[FLT: [[FLT:[[[[FLT:[[[[[[[[[[FLT:]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]
  • बहु दिवसीय आयोजन: उन्हें कई कोशिकाओं या एक व्यापक तत्व के रूप में प्रस्तुत करने के लिए। एक छोर को ड्रागिंग करने के लिए जटिल तर्क की आवश्यकता होती है; प्रारंभ तिथि तक सीमित खींचें पर विचार करें।

जोड़ना, संपादन और हटाने की घटनाओं

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

संपादन संचालन एक पूर्व से भरा प्रपत्र जहां उपयोगकर्ता शीर्षक, समय, रंग और अन्य विशेषताओं को बदल सकते हैं खोलने चाहिए। बचत के बाद, डेटा स्टोर में घटना को अद्यतन और केवल प्रभावित कोशिकाओं को प्रदर्शन बनाए रखने के लिए फिर से प्रस्तुत करने के बाद।

Persisting event Data

ग्राहक साइड स्टोरेज

बिना किसी बैकेंड के सरल ऐप्स के लिए, घटनाओं को JSON स्ट्रिंग के रूप में सहेजने के लिए [[FLT: 13]] का उपयोग करें। लोड पर और हर बदलाव पर सीरियलाइज़ करें और deserialize। यह एकल उपयोगकर्ता उपकरण या प्रोटोटाइप के लिए उपयुक्त है। बड़े डेटासेट के लिए, IndexedDB क्वेरी क्षमताओं के साथ अतुल्यकालिक, कुंजी-मूल्य भंडारण प्रदान करता है।

बैकएंड सिंक्रोनाइज़ेशन

उत्पादन ऐप में, घटनाओं को सर्वर पर सहेजा जाना चाहिए। घटनाओं को प्राप्त करने और अद्यतन करने के लिए आरईटी या ग्राफक्यूएल एपीआई का उपयोग करें।

समय स्लॉट दृश्य (Week और Day)

एक महीने के कैलेंडर अवलोकन के लिए काम करता है, लेकिन सटीक शेड्यूलिंग के लिए हर घंटे की दानेदारता की आवश्यकता होती है। एक सप्ताह या दिन के दृश्य को एक ऊर्ध्वाधर समयरेखा के साथ बनाएं। प्रत्येक दिन कॉलम को स्लॉट (जैसे 30 मिनट के अंतराल) में विभाजित किया जाता है। घटनाओं को उनके शुरू समय और अवधि के लिए आनुपातिक ऊंचाई के आधार पर बिल्कुल स्थान दिया जाता है।

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

उत्तरदायी डिजाइन और मोबाइल विचार

टच डिवाइस HTML5 ड्रैग और ड्रॉप एपीआई को मूल रूप से समर्थन नहीं करते हैं। मोबाइल के अनुकूल कैलेंडर के लिए, टच इवेंट्स (]] को लागू करें, ]], ]]]) मैन्युअल रूप से या एक पुस्तकालय का उपयोग करें Sortable.js] कि अमूर्त क्रॉस-प्लेटफॉर्म ड्रैगिंग. वैकल्पिक रूप से, "चुनने के लिए क्लिक करें, फिर गंतव्य पर क्लिक करें" प्रवाह पर वापस लौटें।

कैलेंडर लेआउट को समायोजित करने के लिए सीएसएस मीडिया प्रश्नों का उपयोग करें: छोटे स्क्रीन पर खड़ी स्टैक दिन, समय कॉलम छिपाएं, और केवल इवेंट शीर्षक दिखाएं। सुनिश्चित करें कि स्पर्श लक्ष्य कम से कम 48x48px हैं।

एक ड्रैग-एंड-ड्रॉप कैलेंडर में पहुंच (a11y)

ड्रैग-एंड-ड्रॉप उन उपयोगकर्ताओं के लिए अप्रूवल हो सकता है जो कीबोर्ड या स्क्रीन रीडर पर भरोसा करते हैं। वैकल्पिक तरीकों को प्रदान करें: एक घटना को स्थानांतरित करने के लिए तीर कुंजी, या "आज से चलें" ड्रॉपडाउन। प्रत्येक सेल पर ARIA विशेषताओं का उपयोग करें , ] और लाइव क्षेत्रों के माध्यम से ड्रॉप की घोषणा की। कीबोर्ड समर्थन के लिए, इवेंट कार्ड के लिए टैब इंडेक्स असाइन करें और एंटर / स्पेस को स्थानांतरित करने के लिए मोड को संभालें, फिर एक लक्ष्य सेल पर नेविगेट करने के लिए तीर कुंजी, और ड्रॉप करने के लिए प्रवेश करें।

पुस्तकालय बनाम वनिला जावास्क्रिप्ट

खरोंच से निर्माण आपको पूर्ण लचीलापन देता है, लेकिन यह समय लेने वाला है। इन लोकप्रिय ओपन सोर्स विकल्पों पर विचार करें:

  • ]fullCalendar – ड्रैग-एंड-ड्रॉप, टाइम व्यूज़ और Vue/React रैपर के साथ सबसे अधिक फीचर-रिच लाइब्रेरी। उद्यम ऐप्स के लिए उपयुक्त।
  • ]React-big-calendar – एक React घटक समान सुविधाओं के साथ, अत्यधिक अनुकूलन.
  • ]Sortable.js - एक हल्के ड्रैग-एंड-ड्रॉप लाइब्रेरी जो किसी भी HTML के साथ काम करती है। बिना किसी रे राइटिंग लॉजिक के कस्टम कैलेंडर में ड्रैग जोड़ने के लिए उत्कृष्ट।
  • DayPilot – वाणिज्यिक लेकिन बॉक्स से बाहर ड्रैग-एंड-ड्रॉप के साथ उन्नत शेड्यूलिंग प्रदान करता है।

अपनी आवश्यकताओं का मूल्यांकन करें: यदि आपको केवल बुनियादी मासिक ड्रैग-एंड-ड्रॉप की आवश्यकता है, तो वेनिला जे एस पर्याप्त है। यदि आपको सप्ताह / दिन के विचारों की आवश्यकता है, तो पुन: आयोजित कार्यक्रम और संसाधन कैलेंडर, एक पुस्तकालय विकास के महीनों को बचाएगा।

निष्पादन अनुकूलन

कैलेंडर सैकड़ों घटनाओं को प्रस्तुत कर सकते हैं।

  • केवल दृश्य महीने या सप्ताह (बड़े डेटासेट के लिए आभासी स्क्रॉलिंग) प्रस्तुत करना।
  • ] का उपयोग करके लेआउट थ्रेसिंग से बचने के लिए ड्रैग के दौरान।
  • ड्रॉप या आकार के बाद पुनः प्रस्तुत करने का निर्णय लेना।
  • समय-स्लॉट विचारों में घटना की स्थिति को याद करना।

बड़े आयोजन पूल, बैच अद्यतन और उपयोग के लिए जब कई DOM नोड्स सम्मिलित किया जाता है।

अपने कैलेंडर का परीक्षण

ड्रैग-एंड-ड्रॉप स्वचालित परीक्षणों में जानबूझकर flaky है। डेटा लॉजिक के लिए यूनिट परीक्षणों में सहायकों का उपयोग करें, और कस्टम कमांड के साथ cypress या playwright पर विचार करें कि फायर माउसडाउन, माउसमूव, माउसअप। टेस्ट एज केस: पहले से ही कब्जा कर लिया गया स्लॉट पर खींचना, एक विकलांग तारीख को खींचना, एक अलग महीने तक खींचना, और तेजी से उत्तरजीवी ड्रॉप।

बाह्य संसाधन

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