पूर्ण कैलेंडर दिन पर ट्रिगर jQuery क्यूटीप

Question

पर मेरे पास jquery fullcalendar है। जब मैं विकल्पों की सूची लाने के लिए एक दिन पर क्लिक करता हूं तो मैं jquery QTip (या अन्य jquery समाधान (जैसे एक लाइटबॉक्स) ट्रिगर करना चाहता हूं। यह प्रश्न this question already posted जैसा है, हालांकि एक नया प्रश्न वारंट करने के लिए पर्याप्त अलग है।

$('#calendar').fullCalendar({ 
    dayClick: function(date, allDay, jsEvent, view) { 

     if (allDay) { 
      alert('Clicked on the entire day: ' + date); 
     }else{ 
      alert('Clicked on the slot: ' + date); 
     } 

     alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY); 

     alert('Current view: ' + view.name); 

     // change the day's background color just for fun 
     $(this).css('background-color', 'red'); 

    } 
}); 

यह स्पष्ट रूप से अलर्ट को लाता है और क्लिक किया सेल लाल के रंग बदल जाता है इस के लिए एक event callback नहीं है, लेकिन मैं अनिश्चित कैसे jQuery Qtip के साथ इस एकीकृत करने के लिए कर रहा हूँ ...।

यहां एक और उदाहरण है जो QTip को घटनाओं पर होवर करने के लिए एकीकृत किया जा रहा है।

$('#calendar').fullCalendar({ 
    ... 
    eventRender: function(event, element, view) 
    { 
     element.qtip({ content: "My Event: " + event.title }); 
    } 
    ... 
}); 

यह उदाहरण क्यूटीआईपी को ट्रिगर करने के लिए उपयोग किए जाने वाले होवर कॉलबैक को दिखाता है।

अब मैं सिर्फ इन दो उदाहरणों गठबंधन करने के लिए जरूरत है ...

अद्यतन 26/05/2010

क्रेग Qtip मंचों पर DayClick कॉलबैक करने के लिए एक विकल्प के रूप viewDisplay कॉलबैक का उपयोग कर सुझाव दिया है जो सभी प्रकार की समस्याओं का कारण बनता प्रतीत होता है। (ब्राउज़र को सबसे प्रमुख होने पर लॉक करना)।

viewDisplay: function() { 
        var calendar = $(this); 

       $(this).qtip({ 
        content: 'TEST', 
        position: { 
       my: 'top center', 
       at: 'top center' 
        }, 
        show: 'click', 
        hide: 'click', 
        style: { 
       tip: true 
        } 
       }) 
     }, 

इस विधि एक टूलटिप जब एक दिन क्लिक किया जाता है पता चलता है:

Here is the post:

यहाँ कोड है। हालांकि कुछ समस्याएं हैं।

1. जहां तक ​​मैं कह सकता हूं कि इस कॉलबैक के माध्यम से कोई तारीख जानकारी एक्सेसिबल नहीं है, जिससे क्लिक की गई तारीख को विशिष्ट टूलटिप दिखाना मुश्किल हो जाता है।
2. इस कॉलबैक के माध्यम से कोई एक्स और वाई क्लिक जानकारी उपलब्ध नहीं है जिससे इसे क्लिक की तारीख के बगल में टिप डालना असंभव हो जाता है।

सभी मदद की बहुत सराहना की जाती है!

धन्यवाद,

टिम

Answer 1

यह सीएसएस के रूप में चला जाता है Qtip करने के लिए लागू किया जाना है।

$.fn.qtip.styles.tipstyle = { 
    width: 400, 
    padding: 0, 
    background: '#FFFFFF', 
    color: 'black', 
    textAlign: 'center', 
    border: { 
     width: 3, 
     radius: 4 
    }, 
    tip: 'bottomMiddle', 
    name: 'dark' 
} 

और यह dayClick समारोह है:

dayClick: function(date, allDay, jsEvent, view) { 
    if (typeof $(this).data("qtip") !== "object") { 
     $(this).qtip({ 
      content: { 
       prerender: true, 
       text: "Hello World" 
      }, 
      position: {corner: {tooltip: 'bottomMiddle', target: 'topMiddle'}}, 
      style: { 
       name: 'tipstyle' 
      }, 
      show: { 
       when: {event: 'click'}, 
       ready: true 
      }, 
      hide: { 
       fixed: true 
      } 
     }); 
    } 
} 

अगर dayClick समारोह के अंदर बयान सुनिश्चित करें कि Qtip हर आप एक ही तिथि पर क्लिक नहीं बनाई गई है बनाता है।

एक छोटी सी समस्या जो आ सकती है, यह है कि यदि आप अपने कुछ ईवेंट डेटा को दिनक्लिक फ़ंक्शन के अंदर एक्सेस करना चाहते हैं। लेकिन फिर भी इसके लिए कामकाज भी हो सकता है।

चीयर्स, Lionheart

Answer 2

मैं दो संभावनाएं है कि बाहर काम कर सकते हैं देखते हैं। एक, आप दस्तावेज़ में अदृश्य div, 20px बार 20px या तो जोड़ते हैं। दिन में कॉलबैक पर क्लिक करें, आप स्थिति में दिन तालिका कक्ष के बीच में स्थिति रखें ($('td.fc-day' + dayNr) के माध्यम से इसे पकड़ लें) और इसे दृश्यमान बनाएं (आप इसे माउस पॉइंटर पर भी स्थान दे सकते हैं)। फिर टूलटिप प्रकट करने के लिए click() पर कॉल करें।

दूसरी संभावना: आप प्रत्येक तालिका कक्ष पर qtip पर कॉल करें ($('div.fc-content').find('td') या इससे भी) और dayClick का उपयोग न करें। या, आप दोनों विचारों को गठबंधन करते हैं और dayClick कॉलबैक में qtip के लिए ईवेंट को ट्रिगर करते हैं।

मैं संभावना के लिए जाऊंगा, मुझे लगता है, क्योंकि इसमें कम घटना श्रोताओं शामिल हैं।हालांकि, यह मानता है कि विशिष्ट दिन के बावजूद आपके पास एक ही टूलटिप है (लेकिन टूलटिप को इसे दिखाने से पहले भी कॉन्फ़िगर किया जा सकता है)।

आशा है कि कोई समझ में आता है।

Answer 3

ठीक-ठीक पता नहीं है कि तुम क्या टूलटिप में दिखाना चाहते हैं, लेकिन आप इस का उपयोग नहीं कर सकते हैं: कॉलबैक 'इस' क्लिक किए गए दिन के <td> है

$('#calendar').fullCalendar({ 
    dayClick: function(date, allDay, jsEvent, view) { 
     $(this).qtip({ content: 'some html content' }); 
    } 
}); 

।

$(this).qtip({ content: yourQtipRenderer(date) }); 

Answer 4

मैं qTip का उपयोग कर नहीं किए गए हैं ईमानदार होना है, लेकिन इसकी प्रलेखन के अनुसार 'शो' विकल्प निर्धारित करता है: हो सकता है 'तारीख' के आधार पर एचटीएमएल प्रस्तुत करना है और यह qtip ट्रिगर से कॉल करने के लिए एक समारोह कर

$('#calendar').fullCalendar({ 
    dayClick: function(date, allDay, jsEvent, view) { 
     $(this).qtip({ content: 'some html content', show: 'click' }); 
    } 
}); 

Answer 5

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

आप पहले जांच सकते हैं कि फ़ंक्शन वास्तव में कॉल किया जा रहा है या नहीं।

$('#calendar').fullCalendar({ 
    dayClick: function(date, allDay, jsEvent, view) { 
     alert(date); 
     } 
}); 

तो एक दिन पर क्लिक करना आपको उस तारीख के साथ एक चेतावनी देता है, तो समस्या Qtip कार्यान्वयन के साथ निहित है: की तरह कुछ की कोशिश करो। अगर आपको कोई चेतावनी नहीं मिलती है, तो समस्या पूर्ण कैलेंडर प्रबंधक कार्यान्वयन के साथ है।

जैसा कि घुटने द्वारा सुझाया गया है, 'शो: क्लिक करें' क्यूटीप को दिखाना चाहिए। लेकिन अगर ऐसा नहीं है, कोशिश:

show: { when: { event: 'click' } } 

अन्त में, मत भूलना डॉक्स की जाँच करने के: http://craigsworks.com/projects/qtip/docs/reference/#show

Answer 6

पॉपअप आप के लिए काम नहीं करता है, jQuery के एक पुराने संस्करण का उपयोग करने का प्रयास करें।

मैंने jquery-1.4 के साथ प्रयास किया और अब यह काम करता है। मैंने jquery-1.2.6 के साथ प्रयास किया और यह पूरी तरह से काम करता है।

a discussion about using older jquery for making qtips work with fullcalendar