Làm thế nào tôi có thể nhận được FullCalendar của Adam Shaw để hiển thị đáp ứng trong một ứng dụng đường ray 4

Question

Tôi đang sử dụng Ruby 2 Rails 4. Tôi đang sử dụng đá quý twitter-bootstrap-ray để có được thanh điều hướng của tôi sụp đổ trên trình duyệt thay đổi kích cỡ.

Tôi muốn có hiệu ứng tương tự với FullCalendar của Adam Shaw. Ngay bây giờ nó sẽ thay đổi kích thước với cửa sổ nhưng tôi muốn nó hiển thị một ngày (chế độ xem basicDay) khi trình duyệt là 480px hoặc thấp hơn, một tuần (chế độ xem cơ bản) khi chế độ xem thấp hơn 767 và chế độ xem tháng đầy cửa sổ cỡ lớn.

Tôi có thể khởi chạy tốt hơn ba lịch khác nhau trong trường hợp có các trình duyệt có kích thước khác nhau không?

ví dụ:

<script> $(document).ready(function() { 

// page is now ready, initialize the calendar... 

$('#calendar').fullCalendar({ 
    events: 'http://www.google.com/calendar/myfeed', 

    if $(window).width() < 514){ 
     defaultView: 'basicDay' 
    } 

    header: { 
      left: 'title', 
      center: '', 
      right: 'today basicDay basicWeek month prev,next' 
     }, 

}); 
}); 
</script> 

Hoặc là có một giải pháp dễ dàng hơn nhiều, đơn giản hơn?

Ngoài ra, tôi thực sự mới ở đây tôi biết mã ví dụ ở trên sẽ không hoạt động như được viết nhưng tôi có đang đi đúng hướng không?

Cảm ơn và xin lỗi nếu điều này được viết ở một nơi khác, tôi không thể tìm thấy nó nhưng sẽ rất vui nếu ai đó chỉ cho tôi đi đúng hướng.

UPDATE:

Để đối phó với những nhận xét đầu tiên, để làm cho nó làm việc tôi đã đi vào fullcalendar.js và thay đổi cách thức hoạt động vẽ chính (đường 240)

/* Main Rendering 
-----------------------------------------------------------------------------*/ 


setYMD(date, options.year, options.month, options.date); 


function render(inc) { 
    if (!content) { 
     initialRender(); 
    } 
    else if (elementVisible()) { 
     // mainly for the public API 
     calcSize(); 
     _renderView(inc); 
    } 
} 


function initialRender() { 
    tm = options.theme ? 'ui' : 'fc'; 
    element.addClass('fc'); 
    if (options.isRTL) { 
     element.addClass('fc-rtl'); 
    } 
    else { 
     element.addClass('fc-ltr'); 
    } 
    if (options.theme) { 
     element.addClass('ui-widget'); 
    } 

    content = $("<div class='fc-content' style='position:relative'/>") 
     .prependTo(element); 

    header = new Header(t, options); 
    headerElement = header.render(); 
    if (headerElement) { 
     element.prepend(headerElement); 
    } 

    changeView(options.defaultView); 

    if (options.handleWindowResize) { 
     $(window).resize(windowResize); 
    } 

    // needed for IE in a 0x0 iframe, b/c when it is resized, never triggers a windowResize 
    if (!bodyVisible()) { 
     lateRender(); 
    } 

    // added this to specify how initial rendering should act on mobile devices. 
    if ($(window).width() < 480){ 
     changeView('agendaDay') 
    }; 

} 

Như bạn có thể thấy, tôi đã thêm "if ($ (window) .width ..." tuy nhiên, đây không phải là giải pháp tuyệt vời bởi chính nó vì nó chỉ giải quyết được một nửa vấn đề của tôi. cửa sổ, nhưng lịch không phản hồi để thay đổi kích thước trong cửa sổ trình duyệt. Kết hợp MarC câu trả lời của razyness với giải pháp trên giải quyết vấn đề thay đổi kích thước trong trình duyệt.

Quan điểm của tôi bây giờ trông như thế này:

Schedule.html.erb $ (document) .ready (function() {

$('#calendar').fullCalendar({ 

    events: 'http://www.google.com/calendar/...', 

     weekMode: 'liquid', 

     defaultView: 'agendaWeek', 

     allDaySlot: false, 

     header: { 
        left: 'title', 
        center: 'agendaDay,agendaWeek,month', 
        right: 'today prev,next' 
     }, 

    windowResize: function(view) { 
     if ($(window).width() < 514){ 
     $('#calendar').fullCalendar('changeView', 'agendaDay'); 
     } else { 
     $('#calendar').fullCalendar('changeView', 'agendaWeek'); 
     } 
    } 
    }); 
}); 
</script> 

Lưu ý: Tôi đã thay đổi các thiết lập tiêu đề nhưng điều này

Hy vọng rằng một hoặc một sự kết hợp của hai chiến thuật này đáp ứng nhu cầu của bạn, nếu bạn có giải pháp đơn giản hơn hoặc trả lời, hãy nhảy trong và cảm ơn bạn rất nhiều, tất cả mọi người, cho tất cả sự giúp đỡ.

Answer 1

Dường như bạn đang cố thay đổi chế độ xem dựa trên thay đổi kích thước. Hãy nhìn vào windowResize gọi lại. http://arshaw.com/fullcalendar/docs/display/windowResize/.

Đảm bảo handleWindowResize là giá trị mặc định, đúng. Hoặc gọi lại sẽ không được gọi.

windowResize: function(view) { 
     if ($(window).width() < 514){ 
      $('#calendar').fullCalendar('changeView', 'basicDay'); 
     } else { 
      $('#calendar').fullCalendar('changeView', 'month'); 
     } 
}