Thay đổi thành basicXem ​​trong FullCalendar nếu chế độ xem là 480px trở xuống?

Question

Có cách nào dễ dàng để thay đổi chế độ xem cho người dùng dựa trên kích thước khung nhìn hiện tại trong FullCalendar không?

Điều tôi muốn làm là có chế độ xem theo tháng trên máy tính để bàn và chế độ xem theo ngày nếu sử dụng iPhone hoặc thiết bị di động. Tại thời điểm này với xem tháng tất cả các sự kiện được đè bẹp lên trên thiết bị di động.

đang hiện tại:

$(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

này có thể không chính xác những gì bạn đang tìm kiếm, nhưng nó có thể giúp bạn bắt đầu đi đúng hướng.

trang web của chúng tôi là đáp ứng và chúng tôi bao gồm các chức năng 'viewScreenSize' trên hầu hết tất cả các trang ...

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); 
} 

Khi fullCalendar được nạp trong '$ (document) .ready (function() {}' và chiều rộng màn hình của chúng tôi được dẫn dắt hơn 601 ...

if (thisScreenWidth < 601) $ ('# lịch') fullCalendar ('changeView', 'basicDay');.

Khi màn hình được thay đổi kích cỡ .. .

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

Ví dụ làm việc ... http://theelmatclark.com/AboutUs/Calendar - chỉ đổi kích thước cửa sổ trình duyệt - khi bạn đổi kích thước, chiều rộng/chiều cao hiện tại xuất hiện ở chân bên cạnh nút [Trang chủ].

Có thể có những cách tốt hơn, nhưng tôi chưa tìm thấy. Chúc may mắn.

Câu hỏi ... Có ai biết cách chia tiêu đề thành nhiều dòng không?