एक गतिशील उत्तरदायी सप्ताह कैलेंडर

Question

डिजाइनिंग मैं Twitter Bootstrap का उपयोग कर गतिशील उत्तरदायी सप्ताह कैलेंडर बना रहा हूं। http://jsfiddle.net/dvirazulay/Lhe7C/

(एक छोटे से पूर्ण रूप से यहाँ में पेस्ट करने के लिए लंबे समय से था) और यहाँ इसके बारे में एक वर्तमान स्क्रीनशॉट है:

क्या मैं कोशिश कर रहा हूँ

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

जाहिर है, मैंने टेबल को चुना क्योंकि यह मुझे समझ में आया - एक सप्ताह का कैलेंडर मूल रूप से एक टेबल है। मैं अपने डिजाइन का वर्णन करेंगे:

1. एक घटना में 30 से अधिक मिनट के लिए अवधि सकता है, तो मैं rowspan का उपयोग परिभाषित करने के लिए कितने घंटे इस पर विस्तार करना चाहिए।
2. दो घटनाएं विरोधाभासी हो सकती हैं (मैं दो से अधिक की अनुमति नहीं देता)। चूंकि यह वर्तमान में सेट अप है, वे एक-दूसरे के बगल में दिखाई देते हैं, प्रत्येक घटना चौड़ाई का 50% लेते हैं और जितना अधिक ऊंचाई लेते हैं, उन्हें अंत समय का प्रतिनिधित्व करने की आवश्यकता होती है।
3. बैक-एंड तरफ, मैं गणना कितने td मैं आदेश तालिका के अंत में अतिरिक्त कॉलम के लिए नहीं में छोड़ (rowspan सही करने के लिए कुछ धक्का के रूप में)

मेरे सवालों की जरूरत है निम्नलिखित हैं:

• क्या यह सही दृष्टिकोण है?
• क्या मुझे फ्रंट-एंड पर समान बैक-एंड लॉजिक लागू करना चाहिए, और मेरे पास मौजूद घटनाओं की मात्रा के अनुसार दिखाने के लिए tr/td की राशि की पुन: गणना करना चाहिए, या इसके लिए कोई बेहतर समाधान है?

आदर्श रूप से, एक अच्छे उत्तर का वर्णन इस मुद्दे के लिए जटिलताओं या वैकल्पिक (उत्तरदायी!) डिज़ाइन के बिना सामने वाले पक्ष पर घटनाओं को कैसे संभालना चाहिए।

मैं एक मौजूदा प्लगइन का उपयोग नहीं करना चाहता, जैसा कि मैंने खोजा है और कई लोगों की कोशिश की है, और मैं इसे वास्तव में हल्का वजन रखना चाहता हूं, लेकिन यदि आपके पास आवश्यकताओं को पूरा करने वाले व्यक्ति के लिए एक अच्छा सुझाव है - I इसे जांचना अच्छा लगेगा! (jQuery सप्ताह कैलेंडर बहुत धीमा है और उदाहरण के लिए अव्यवस्थित है)

नोट: मेरे पास IE9 से पुराने ब्राउज़र का समर्थन करने का कोई इरादा नहीं है।

Answer 1

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

हालांकि यह निर्णय यह मुश्किल गतिशील पूरे तालिका पुन: तैयार करने के बिना शेड्यूल परिवर्तित करने के लिए बनाता है, स्टाइल तत्वों का लाभ एक मेज होना चाहिए कि एक मेज के रूप में भुगतान - एक सीध में लाना, चौड़ाई, ऊंचाई, बॉर्डर, आदि नियंत्रण करने और महान क्रॉस-ब्राउज़र काम करने के लिए सभी आसान हैं।

एक महत्वपूर्ण नोट यह है कि यह दृष्टिकोण अनुसूची की प्रतिक्रिया को एक छोटी गुणवत्ता बना रहा है।

Answer 2

यह करने का यह एक स्वीकार्य तरीका है।

यदि मैं आप थे तो शायद मैं divs का उपयोग करता हूं क्योंकि वे सीएसएस का उपयोग करने के लिए अधिक प्रबंधनीय और आसान हैं और अधिक मानक हैं।

इसके अलावा मुझे लगता है कि आप एक अच्छा दृष्टिकोण ले रहे हैं और आपको संभवत: पीछे के अंत के समान ही अंत करना चाहिए क्योंकि आप जानते हैं कि यह काम करता है।

जहां तक ​​आयोजनों को संभालने के लिए मैं वर्गों का उपयोग करके प्रकारों को विभाजित करता हूं और फिर उन घटनाओं के प्रकारों के साथ ईवेंट हैंडलर का उपयोग करता हूं जिन्हें आप उपयोग करना चाहते हैं (मुझे नहीं पता कि आप क्या चाहते हैं इसके अलावा क्लिक करें) कक्षाएं।

Answer 3

तालिका का उपयोग करना एक अच्छा तरीका है।

ठीक है, यह "पंक्तियों को सही धक्का दिया जाता है" समस्या का एक jQuery आधारित समाधान है। समस्या की उत्पत्ति बैकएंड में एक गलत तालिका पीढ़ी है।

उदाहरण के लिए यदि rowspan = "3" के साथ एक टीडी प्रस्तुत किया जाता है, तो अगले दो पंक्तियों में एक ही कॉलम इंडेक्स स्थिति पर टीडी प्रभावित होगा और दाईं ओर धक्का दिया जाएगा। यह अवांछित है।

<table border="1"> 
<tr> 
    <td>07:30</td> 
    <td rowspan="3">Event 07:30 to 09:00</td> 
</tr> 
<tr> 
    <td>08:00</td> 
    <td>Should not be rendered.</td> 
</tr> 
<tr> 
    <td>08:30</td> 
    <td>Should not be rendered.</td> 
</tr> 
<tr> 
    <td>09:00</td> 
    <td>C</td> 
</tr> 

सही समाधान बैकएंड में एक सही तालिका पीढ़ी है। रोशन के बाद टीडी को प्रस्तुत करना बस नहीं होना चाहिए। यदि आप जानते हैं, कि आप एक rowspan = "3" प्रतिपादित कर रहे हैं, तो तदनुसार कार्य करें। :)

वैसे भी, अगर यह मेज प्रतिपादन संशोधित करने के लिए संभव नहीं है, तो jQuery इसे ठीक करने का उपयोग करें:

http://jsfiddle.net/9tQvu/3/

Answer 4

क्या होता है जब एक घटना केवल दूसरे के साथ आंशिक रूप से अतिव्यापी है, मेरा मतलब, 2 ओवरलैपिंग घटनाओं में witdh का 50% लगता है, लेकिन यदि उनमें से एक जल्द खत्म हो जाएगा और दूसरा बाद में, जो जारी रहता है, क्या यह "अगली" पंक्ति की सभी चौड़ाई लेता है या चौड़ाई के 50% पर जारी रहता है? यदि घटना ए 8:00 से 8:30 तक है और ईवेंट बी 8:00 से 18:00 तक है तो क्या होगा? यह अच्छा होना चाहिए कि घटना बी चौड़ाई को पूरा करेगा जब तक कि एक और ओवरलैपिंग ईवेंट न हो .. लेकिन मुझे लगता है कि यह थोड़ा मुश्किल हो सकता है। बस एक विचार। हैप्पी कोडिंग, यह वास्तव में एक अच्छी परियोजना है।

Answer 5

dhtmlxScheduler - अजाक्स/जावास्क्रिप्ट घटना कैलेंडर

dhtmlxScheduler एक JavaScript घटना कैलेंडर आप अपने वेब एप्लिकेशन या वेबसाइट के लिए एक गूगल की तरह अनुसूचक जोड़ने के लिए अनुमति देता है। सहज ज्ञान युक्त ड्रैग-एंड-ड्रॉप इंटरफ़ेस अंतिम उपयोगकर्ताओं को विभिन्न विचारों में ईवेंट और नियुक्तियों को त्वरित रूप से प्रबंधित करने की अनुमति देता है: दिन, सप्ताह, महीना, वर्ष, एजेंडा, टाइमलाइन इत्यादि। बहुत हल्का (लगभग 20 केबी gzipped), अत्यधिक अनुकूलन योग्य, और तेज़, dhtmlxScheduler वेब पेज पर अजाक्स-आधारित ईवेंट कैलेंडर जोड़ने का एक त्वरित तरीका प्रदान करता है।

Answer 6

तालिका कोशिकाओं के बजाय सीएसएस और divs का उपयोग करना अधिक सटीक हो सकता है और निश्चित रूप से क्लाइंट-साइड की गणना करना और प्रतिक्रिया बनाए रखना आसान होगा।पहली घटना के लिए यहां एक pseduo-CSS/JS उदाहरण है:

.event:first-child { 
    height: `(1.5/24)*100`%; /* 6.25%, based on duration */ 
    position: absolute; 
    top: `(10/24)*100`%; /* 41.7%, based on event start */ 
}