30 लाइनों में अपना Google कैलेंडर एनालॉग नहीं डाल रहा है

यात्री परिवहन में लगे परिवहन कंपनी के लिए एक परियोजना विकसित करते समय, सिस्टम में एम्बेड करने के लिए हमारे Google कैलेंडर एनालॉग को लागू करने के लिए कार्य उत्पन्न हुआ।
कुछ कारणों से (परियोजना में गहरा एकीकरण, विभिन्न संस्थाओं के एक समूह के साथ संचार, कोड के सभी भागों पर पूर्ण नियंत्रण, आदि), Google से एक समाधान का उपयोग करना कई बिंदुओं से तर्कहीन था।

तो, समस्या की स्थिति:

1. इंटरफ़ेस को Google से इंटरफ़ेस के जितना संभव हो उतना करीब होना चाहिए (क्योंकि इससे पहले उन्होंने इसका इस्तेमाल किया था)
2. RFC 2445 का सामान्य कार्यान्वयन, इसके कुछ भाग RRULE (पुनरावृत्ति पैटर्न) के बारे में
3. ब्राउज़र में घटनाओं की तारीखों की गणना की तेज गति (इस मामले में, उड़ानें) और उनका प्रतिपादन
4. खर्च किए गए समय को कम करने के लिए मौजूदा पुस्तकालयों के उपयोग को अधिकतम करें।

यदि विषय दिलचस्प है या आपके पास कहने के लिए कुछ है, क्योंकि अभी भी काम चल रहा है और यह पोस्ट केवल एक छोटे हिस्से को प्रभावित करती है - मैं कटौती के लिए कहता हूं, मुझे सार्थक सलाह पर खुशी होगी।


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

1. कैलेंडर के रूप में विज़ुअलाइज़ेशन के लिए, थोड़ा संशोधित jQuery प्लगइन FullCalendar जिम्मेदार होगा
2. आवर्ती उड़ानों का निर्माण फ्यूलक्स सूट से शेड्यूलर.जेएस को सौंपा गया है
3. डेटाबेस में आकार में कमी करने के लिए पुनरावृत्ति पैटर्न डेटाबेस में संग्रहीत किया जाएगा "FREQ = DAILY; INTERVAL = 21; UNTIL = 20130130T230000Z;"
4. उड़ान की तारीखों के एक सेट के लिए पुनरावृत्ति पैटर्न के रूपांतरण को सर्वर की क्षमता को उतारने के लिए ग्राहक की ओर से लागू किया जाएगा

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

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

मान लीजिए कि हमारे पास फ़ील्ड नाम, लंबाई और पुनरावृत्ति पैटर्न के साथ RRULE नियमों का एक json सरणी है। हम बैकएंड से इसकी रसीद छोड़ देंगे।

[{ "name": "Reccurence Event #1", "length": "120", "rrule": "DTSTART=20020201T083000Z;FREQ=WEEKLY;WKST=MO;BYDAY=WE,FR" }, { "name": "Reccurence Event #2", "length": "120", "rrule": "FREQ=MONTHLY;DTSTART=20000201T083000Z;WKST=MO;BYDAY=TU" }, { "name": "Reccurence Event #3", "length": "120", "rrule": "FREQ=DAILY;DTSTART=20000201T063000Z;WKST=MO;BYDAY=MO,FR" } ] 

हम सरणियों को आरंभीकृत करते हैं और RRULE स्ट्रिंग्स से rrule.js प्लगइन ऑब्जेक्ट बनाते हैं:

 var data = private_env.get_data(); var rules = new Array(); var occurs = new Array(); for (var k in data){ rules.push( { name: data[k].name, length: data[k].length, rrule: RRule.fromString(data[k].rrule) }); } 

हम अपनी वस्तुओं से प्रत्येक उड़ान के लिए तारीखों की एक सूची प्राप्त करते हैं, जहां DATE_START और DATE_END उस दूरी की शुरुआत और अंत के अनुरूप हैं, जिसके लिए हमें उन्हें प्राप्त करने की आवश्यकता है:

 for (var k in rules){ occurs.push( { name: rules[k].name, length: rules[k].length, occurs: rules[k]['rrule'].beetween(DATE_START,DATE_END) }); } 

हम कैलेंडर को प्रस्तुत करने से पहले साफ़ करते हैं:

 $calendar.fullCalendar('removeEvents', function (event){ return true; }); 

और हम अपनी उड़ानों को स्क्रीन पर प्रदर्शित करते हैं:

 for (var k in occurs){ for (var i in occurs[k].occurs){ var event = { id: k, title: occurs[k].name, start: occurs[k].occurs[i], /*         ,   */ end: new Date(occurs[k].occurs[i].getTime()+(1000*60*occurs[k].length)), allDay: false }; /*  renderEvent,       , ..   */ $calendar.fullCalendar('renderEvent', event, 1, 0); } } /*    ,   1   */ this.fullCalendar('renderEvent',{allDay: false}, 0, 1); 

हम उपरोक्त सभी को एक फ़ंक्शन में लपेटते हैं, उदाहरण के लिए, (DATE_START, DATE_END) रेंडर करें और व्यूअरेंडर ईवेंट के दौरान FullCalendar प्लगइन को कॉल करें:

 ... viewRender: function(view, element){ $(private_env.env_self).service('render', 'between', view.visStart, view.visEnd); } ... 

फिलहाल, हमें निम्नलिखित चित्र के बारे में मिला है:


UPD : उदाहरण

मैं किसी पोस्ट को कोड से शीट में बदलने का बिंदु नहीं देखता, मुझे लगता है कि सामान्य विचार स्पष्ट है। प्रकटन और इसके बाद संशोधित करना मुश्किल नहीं है।

बनाने और संपादित करने के बारे में कुछ शब्द।

FullCalendar में बड़ी संख्या में कार्यक्रम हमें संपादन कार्यक्षमता को लागू करने की अनुमति देते हैं। आवश्यक कार्यशीलता:

1. क्लिक करने पर, उड़ान संपादन फ़ॉर्म खुल जाता है
2. खींचने और छोड़ने पर, हम कार्रवाई विकल्पों के लिए अनुरोध जारी करते हैं। एक एकल उड़ान का संपादन, संपूर्ण पुनरावृत्ति श्रृंखला का संपादन, भविष्य की पुनरावृत्ति का संपादन

कार्य तुच्छ है और घटनाओं पर काम करने के लिए नीचे आता है EventClick, EventDrop, eventResize। वैसे, पिछले दो कार्यों को रद्द करने की क्षमता है:

 ... revertFunc(); ... 

एकमात्र कैविएट। "केवल एक उड़ान को बदलने" का चयन करते समय हम “RRULE FREQ = MONTHLY काटते हैं; DTSTART = 20000201T083000Z; WKST = MO; BYDAY = TU” तीन अलग-अलग पैटर्न में।
इस की उड़ान से पहले क्या हुआ था, वर्तमान उड़ान और उसके बाद क्या होगा। यह DTSTART और UNTIL नियमों में विकल्पों को बदलकर हल किया गया है।

उड़ानों के निर्माण के लिए, Scheduler.js RFC 2445 के अनुसार पुनरावृत्ति की एक स्ट्रिंग का उत्पादन कर सकता है, जो कि इस प्रकार है:

 ... $('#myScheduler').scheduler('value') ... 

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