FullCalendar - आकार बदलने खिड़की पर कैलेंडर का आकार बदलने के

Question

मैं FullCalendar उपयोग कर रहा हूँ (fullcalendar by adam shaw)

मैं सोच रहा हूँ मुझे लगता है कि मेरी FullCalendar गतिशील आकार ब्राउज़र विंडो के आकार के आधार बदल जाता है ऐसा करने के लिए की आवश्यकता होगी क्या? मैंने अपने 'रेंडर' फ़ंक्शन को थोड़ा सा देखा है लेकिन इसे समझने में परेशानी हो रही है।

Answer 1

यह सब दस्तावेज़ीकरण किया गया है।

चलो, देखते हैं कि यह पंक्तियों के साथ कुछ प्रयास करें:

//function to calculate window height 
function get_calendar_height() { 
     return $(window).height() - 30; 
} 

//attacht resize event to window and set fullcalendar height property 
$(document).ready(function() { 
    $(window).resize(function() { 
     $('#calendar').fullCalendar('option', 'height', get_calendar_height()); 
    }); 


    //set fullcalendar height property 
    $('#calendar').fullCalendar({ 
      //options 
      height: get_calendar_height 
    }); 
}); 

चौड़ाई के समान लागू करें। या आप कैलेंडर में div डाल सकते हैं और इस तरह से कुशलतापूर्वक काम कर सकते हैं।

Answer 2

मैं "उत्तरदायी कैलेंडर" googled, (यानी, जब कोई उपयोगकर्ता अपना खिड़की का आकार बदलता है मैं फिर से समायोजित करने के लिए यह चौड़ाई है और एक उचित पहलू अनुपात को ऊंचाई FullCalendar चाहते हैं), क्योंकि है कि तुम क्या चाहते थे मैं सिर्फ आपको लगता है यह नहीं पता था कि यह कैसे शब्द है। मेरा मानना ​​है कि मैंने जो लिंक प्रदान किए हैं, आपको आपको अपने रास्ते पर ले जाना चाहिए। मुझे लगता है कि आप अपने टैग की वजह से जावास्क्रिप्ट/jquery का उपयोग करके ऐसा करना चाहते हैं। यदि लिंक उपयोगी हैं, तो यह भी ठीक है क्योंकि अब आप जानते हैं कि क्या खोजना है, शुभकामनाएँ!

उत्तरदायी कैलेंडर डेमो:
http://dbushell.com/demos/calendar/v1_03-01-12.html
http://www.manystrands.com/projects/calendar.html (कुछ हद के बाद कार्यसूची दृश्य में परिवर्तन।)

अधिक जानकारी:
http://dbushell.com/2012/01/04/responsive-calendar-demo/

Answer 3

चौड़ाई के लिए, हम उत्तरदायी डिजाइन के साथ समायोजित करने के लिए कैलेंडर लचीला बनाया है, है, और यह बहुत अच्छी तरह से बड़े प्रदर्शनों पर काम किया:

#calendar { 
    width: 100%; 
    margin: 0 auto; 
} 

किसी अन्य अनुकूलन के लिए, का उपयोग करें (ऊंचाई या डिफ़ॉल्ट दृश्य बदल रहा है) फुल कैलेंडर के लिए अंतर्निहित windowResize ईवेंट। स्वीकार्य उत्तर का नकारात्मक पक्ष यह है कि प्रत्येक पिक्सेल परिवर्तन के लिए, जब विंडो का आकार बदल रहा है, तो फ़ंक्शन चलाएगा। इसके विपरीत, आकार बदलने के बाद windowResize ईवेंट आग लग गई है।

अब, एक उत्तरदायी कैलेंडर के साथ समस्या यह है कि आप अभी भी टेबल की दया पर हैं - एक छोटी मोबाइल स्क्रीन पर होने के लिए एक भयानक जगह है।

हमारी परियोजना के लिए, यदि हम उपयोगकर्ता 769px से कम स्क्रीन पर थे तो हम दिन के दृश्य को मजबूर करना चुनते हैं। आप इस उदाहरण में हमारी विधि देख सकते हैं। यदि यह आपके लिए काम नहीं करता है, तो कम से कम यह आपको एक समाधान को कार्यान्वित करने के तरीके पर कुछ दिशा देगा।

function getWindowWidth(){ 
    return $(window).width(); 
} 
function getView(){ 
    return (ww <= 768) ? 'basicDay' : 'month'; 
}