javascript - fullcalendar-विंडो आकार बदलने पर कैलेंडर का आकार बदलें




jquery resize (2)

मैं "उत्तरदायी कैलेंडर" चला गया, क्योंकि यही वह है जो आप चाहते थे मुझे अभी लगता है कि आपको यह नहीं पता कि यह कैसे शब्द है। मेरा मानना ​​है कि जो लिंक मैं आपको प्रदान करता हूं आपको आपको अपने रास्ते पर ले जाना चाहिए। मैं मान रहा हूँ कि आप अपने टैग्स के कारण यह जावास्क्रिप्ट / 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/

मैं fullcalendar का उपयोग कर रहा हूँ ( एडम शॉ द्वारा fullcalendar )

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

(यानी, जब कोई उपयोगकर्ता अपनी विंडो का आकार बदलता है तो मैं इसे पूर्ण कैलेंडर चाहता हूँ ताकि इसे चौड़ाई और ऊंचाई उचित पहलू अनुपात में समायोजित कर सके)


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

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

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

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

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

var ww,view;
$(function(){
    $('#calendar').fullCalendar({
        windowResize: function(view) {
            ww = getWindowWidth();
            view = getView();
            var currentView = $('#calendar').fullCalendar('getView');
            if(view != currentView){
                $('#calendar').fullCalendar('changeView',view);
            }
            if(ww <= 768){
                $('.fc-header-right .fc-button').hide();
            }else{
                $('.fc-header-right .fc-button').show();
            }
        }
    });
});

ऊपर दिए गए फ़ंक्शंस यहां दिए गए हैं:

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




fullcalendar