अगर व्यूपोर्ट 480px या उससे कम है तो FullCalendar में मूलभूत दृश्य में बदलें?

Question

क्या पूर्ण कैलेंडर में वर्तमान व्यूपोर्ट आकार के आधार पर उपयोगकर्ता के दृश्य को बदलने का कोई आसान तरीका है?

मैं क्या करना चाहता हूं डेस्कटॉप पर महीने का दृश्य है, और एक आईफोन या मोबाइल डिवाइस का उपयोग करते समय दिन का दृश्य। इस महीने के साथ सभी घटनाओं को मोबाइल पर squashed कर रहे हैं।

वर्तमान कोड:

$(document).ready(function() { 
    $("#primary #calendar").fullCalendar({ 
     header: { 
      left: 'prev,next', 
      center: 'title', 
      right: 'month,agendaWeek,agendaDay' 
     }, 
     timeFormat: 'h(:mm)tt',   
     eventSources: [ 
      { 
       url: 'http://www.google.com/mycal1', 
       color: 'blue', 
       textColor: 'white' 
      }, 
      { 
       url: 'http://www.google.com/mycal2', 
       color: 'white', 
       textColor: 'black' 
      } 
     ] 
    }) 
}); 

Answer 1

यह नहीं हो सकता है आप के लिए वास्तव में क्या देख रहे हैं, लेकिन यह मिल सकता है आप सही दिशा में शुरू कर दिया।

हमारी वेबसाइटों उत्तरदायी हैं और हम सबसे हर पृष्ठ पर 'viewScreenSize' समारोह ...

var thisScreenWidth = 0, thisScreenHeight = 0; 
function viewScreenSize() { 
    if (typeof (window.innerWidth) === 'number') { 
     //Non-IE 
     thisScreenWidth = window.innerWidth; 
     thisScreenHeight = window.innerHeight; 
    } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { 
     //IE 6+ in 'standards compliant mode' 
     thisScreenWidth = document.documentElement.clientWidth; 
     thisScreenHeight = document.documentElement.clientHeight; 
    } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) { 
     //IE 4 compatible 
     thisScreenWidth = document.body.clientWidth; 
     thisScreenHeight = document.body.clientHeight; 
     screenWidth = thisScreenWidth; 
    } 
    // screenSize = div in page footer 
    $("#screenSize").html(thisScreenWidth + "x" + thisScreenHeight); 
} 

जब Fullcalendar में लोड किया जाता है शामिल '$ (document) .ready (function() {}' और ।

जब स्क्रीन का आकार बदला है .., हमारे स्क्रीन की चौड़ाई यदि (thisScreenWidth < 601) $ ('# कैलेंडर') Fullcalendar ('changeView', 'basicDay') 601 से नेतृत्व किया है ...

$(window).bind('resize', function() { 
    if (thisScreenWidth < 601) $('#calendar').fullCalendar('changeView', 'basicDay'); 
    else $('#calendar').fullCalendar('changeView', 'month'); 
}); 

कार्य उदाहरण ... http://theelmatclark.com/AboutUs/Calendar - केवल ब्राउज़र विंडो का आकार बदलने - के रूप में आप का आकार परिवर्तन, वर्तमान चौड़ाई/ऊंचाई पाद लेख [गृह] बटन के बगल में दिखाई देते हैं।

बेहतर तरीके हो सकते हैं, लेकिन मुझे अभी तक कोई नहीं मिला है। सौभाग्य।

प्रश्न ... क्या कोई भी शीर्षलेख को एकाधिक पंक्तियों में विभाजित करने के तरीके के बारे में जानता है?