🍖 ♈️ 💅🏽 MODx - घटनाओं / समाचार 2 का स्वयं का अजाक्स कैलेंडर 👩🏿‍🌾 👵🏿 🛵

सप्ताहांत मेरे स्वास्थ्य के लिए कठिन है, लेकिन मैं मॉडक्स के लिए अपने कैलेंडर के कार्यक्रमों को फिर से लिखने में सक्षम था।

आपको याद दिला दूं कि स्निपेट निर्दिष्ट MODx निर्देशिका से घटनाओं को लेता है और दिन के साथ घटनाओं के साथ एक कैलेंडर बनाता है, जो कि वांछित दिन पर मंडराने पर प्रदर्शित होते हैं।

पिछले संस्करण से क्या अंतर हैं?

सबसे महत्वपूर्ण बात, कैलेंडर को तृतीय-पक्ष jquery.datepicker प्लगइन द्वारा प्रस्तुत नहीं किया गया है, लेकिन php द्वारा। सीएसएस कक्षाएं प्रत्येक कोशिका से जुड़ी होती हैं, जो उनके गुणों पर निर्भर करती हैं। सभी वर्गों, सप्ताह के दिनों के नाम, महीने स्निपेट मापदंडों में निर्धारित किए जाते हैं, जिससे उन्हें बदलना आसान हो जाता है।

ध्यान आकर्षित करने के लिए एक तस्वीर।

पंजीकरण

तो, उत्पन्न कैलेंडर में निम्नलिखित HTML संरचना है:

<div id='Calendar'> <table class='calendar'> <tr> <td class='prev' name=' .-'> </td> <td class='month' colspan='5'> </td> <td class='next' name=' .-'> </td> </tr> <tr> <th class='dow'> </th> </tr> <tr> <td class='weekend isevent' id='calendar_1'> <div class='date'></div> <div class='event'><div> </td> </tr> </table> </div>

जैसा कि आप देख सकते हैं, घटना उसी सेल में है जिसमें तारीख है और उसकी अपनी कक्षा है। इसलिए, सीएसएस का उपयोग करके इसे आसानी से छिपाया और प्रदर्शित किया जा सकता है।

लगभग बिना सजावट के, छिपी हुई घटनाओं के साथ, कैलेंडर इस तरह दिखता है:

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

यह बताने का समय है कि कौन सी कक्षाएं डिफ़ॉल्ट रूप से उपयोग की जाती हैं:

 .calendar -    .dow -      .month -       .workday -   .weekend -  .today -  .isevent -    .noevent -    .event - div   .date - div   .emptyday -  ,   .prev -      .next -

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

और यह कुछ इस तरह से निकला:

ब्यूटी!

~~छिपे हुए divs को प्रदर्शित करने के लिए, आप qTip का उपयोग कर सकते हैं।~~ इसके बिना करना बेहतर है।

  $('.isevent').live('mouseover',function() { id = this.id; $('#' + id + ' .event').show(); }) $('.isevent').live('mouseout',function() { id = this.id; $('#' + id + ' .event').hide(); })

  .isevent { color: black; text-align: left; position:absolute; z-index: 10; display: none; background: #fff; border: 1px solid #AAA; padding: 5px; width: 250px; margin-top: -10px; margin-left: 10px; }

यहाँ परिणाम है:

Div छिपा हुआ है, जब आप सेल पर प्रदर्शित होते हैं, तो होवर करते हैं और पूरा डिज़ाइन css में होता है। मुख्य चीज स्थिति है: पूर्ण और जेड-इंडेक्स: 10।

सब कुछ आसान और सरल है।

टुकड़ा

मैं स्निपेट कोड नहीं दूंगा, लेकिन मैं सभी मापदंडों और प्लेसहोल्डर्स को दे दूंगा।

मापदंडों

 &id  : ,   : [int] : id  - MODx    &month  : date('m') : [int] :     &year  : date('Y') : [int] :     &dateTV  : event_date : [string] :   TV      &dateFormat  : '%d %b %Y %H:%M' : [string] :  ,  strftime() &tplEvent  : tplEvent : [string] :    MODx &tplMain  : tplCalendar : [string] :    MODx &calendar_id  : Calendar : [string] :     . ,        &class_calendar  : calendar : [string] :  css      &class_dow  : dow : [string] :  css      &class_month  : month : [string] :  css       &class_workday  : workday : [string] :  css      &class_weekend  : weekend : [string] :  css     &class_today  : today : [string] :  css     &class_event  : event : [string] :  css    div   &class_isevent  : isevent : [string] :  css        &class_noevent  : noevent : [string] :  css        &class_date  : date : [string] :  css      &class_emptyday  : emptyday : [string] :  css     ,   &class_prev  : prev : [string] :  css         &class_next  : next : [string] :  css         &dow_names  :   &lang : [string] :      ,  ,  .  ,   . &month_names  :   &lang : [string] :    ,  ,  .  ,   . &btn_prev  : '«' : [string] :       &btn_next  : '»' : [string] :       &lang  : 'en' : [en,ru] :        &show_errors  : 1 : [0|1] :  ,   -  &first_day  : 0 : [0|1] : 0 -   - . 1 -   - .

प्लेसहोल्डर

स्निपेट सजावट के लिए सीएसएस श्रेणी के नामों के साथ सेवा प्लेसहोल्डर्स का उपयोग करता है, आप उन्हें उन मापदंडों के माध्यम से बदल सकते हैं जो मैंने ऊपर वर्णित किए हैं। इन धारकों को छूने की जरूरत नहीं है।

 [+ec.Calendar+]  ,      [+ec.calendar_id+]     [+ec.class_calendar+] css     [+ec.class_dow+] css    [+ec.class_month+] css     [+ec.class_workday+] css    [+ec.class_weekend+] css   [+ec.class_today+] css   [+ec.class_event+] css   [+ec.class_isevent+] css     [+ec.class_noevent+] css     [+ec.class_date+] css   [+ec.class_emptyday+] css    [+ec.class_prev+] css     [+ec.class_next+] css

और घटना मानों को प्रतिस्थापित करने के लिए प्लेसकोडर्स भी हैं:

 [+ec.num+]    . ,         .    ,        TV   . ,    . [+ec.date+]  . [+ec.url+]   . [+ec.title+] ,   pagetitle  MODx. [+ec.desc+]  ,   introtext  MODx.

अब पुरालेख डाउनलोड करें और अनपैक करें। हम MODx व्यवस्थापक पैनल में घटनाओंCalendar2 स्निपेट बनाते हैं, इसमें घटनाओंCalendar2.snippet.php फ़ाइल की सामग्री की प्रतिलिपि बनाएँ।

हम दो विखंडू, tplEvent2 और tplCalendar2 बनाते हैं , ये क्रमशः क्रमशःCalendar2.tplEvent.html और घटनाओंCalendar.tplCalendar2.html हैं।

एक नया MODx दस्तावेज़ बनाएं और स्निपेट को कॉल करें:

 [!eventsCalendar2? &id=`13` &calendar_id=`Cal1` &dateTV=`event_date` &dateFormat=`%d %b %Y %H:%M` &tplEvent=`tplEvent2` &tplMain=`tplCalendar2` !]

~~मत भूलो, qTip आपके पृष्ठ पर जुड़ा होना चाहिए!~~

यदि आप कैलेंडर को अंग्रेजी में अनुवाद करना चाहते हैं - दिनों और महीनों का नाम बदल दें। इसके अलावा, आप एक पृष्ठ पर कई कैलेंडर कॉल कर सकते हैं - आपको बस सभी को अपना & कैलेंडर_दिना दिखाना होगा।

TplCalendar2 chunk में संपूर्ण कैलेंडर डिज़ाइन शामिल है, आप इसे अपनी इच्छानुसार बदल सकते हैं, बस प्लेसहोल्डर्स के नामों को स्पर्श न करें!

पिछले कैलेंडर के नुकसान अब दूर हो गए हैं। सब कुछ स्मार्ट और सुचारू रूप से काम करता है। कभी-कभी यह qTip चला सकता है और पॉप-अप दिखाना बंद कर सकता है - लेकिन यह मेरी गलती नहीं है। सिद्धांत रूप में, छिपे हुए divas को इसके बिना प्रदर्शित किया जा सकता है, विधियां भरी हुई हैं।

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

हम यहां बग्रेपोर्ट पोस्ट करते हैं, यदि उपयोगकर्ता कैलेंडर पसंद करते हैं, तो इसे MODx रिपॉजिटरी को भेजें।

स्निपेट और विखंडू के साथ संग्रह डाउनलोड करें ।

काम पर कैलेंडर देखें (क्रांति के लिए संस्करण) ।

युपीडी।

मैंने qTip से छुटकारा पा लिया, एक स्निपेट के साथ विषय और संग्रह को अपडेट किया।

UPD.2

अंग्रेजी जोड़ा गया। 3 पैरामीटर जोड़े गए: & lang, और first_day, और show_errors। मापदंडों के विवरण को अपडेट किया, स्निपेट का एक नया संस्करण अपलोड किया।

UPD.3

उत्पन्न कोड W3C मानकों के साथ गठबंधन किया गया है और सत्यापनकर्ता को पास करता है।

Readme.html संग्रह में जोड़ा गया।

विषय में लिंक अपडेट किया गया।

UPD.4

घटनाओं को अब केवल वांछित महीने के लिए चुना जाता है, जो सिस्टम पर लोड को काफी कम करता है।

टेम्पलेट्स में किसी भी टीवी मापदंडों और संसाधन गुणों का उपयोग करने की क्षमता जोड़ा गया।

उन साइटों के लिए जहां समय क्षेत्र होस्टिंग के साथ मेल नहीं खाता है, उन घंटों के लिए समय शिफ्ट पैरामीटर और समय_शिफ्ट में जोड़ा गया।

डिफ़ॉल्ट सेटिंग्स रूस के लिए निर्धारित हैं। सप्ताह सोमवार से शुरू होता है, भाषा रूसी है।

नए प्लेसहोल्डर्स के अनुसार, बदला हुआ tplEvent2।

यह प्रोजेक्ट code.google.com के लिए छोड़ दिया गया। आगे विकास होगा।

UPD.5

क्रांति के लिए रीडिड, Google कोड पर डाउनलोड किया जा सकता है।

MODx - घटनाओं / समाचार 2 का स्वयं का अजाक्स कैलेंडर

पंजीकरण

टुकड़ा

मापदंडों

प्लेसहोल्डर

More articles: