Wie kann ich Adam Shaws FullCalendar reaktionsfähig in einer Schiene 4 App

Question

Ich benutze Ruby 2 Rails 4. Ich benutze die twitter-bootstrap-Schienen Juwel, um meine Navbar auf Browser-Größe zu verkleinern.

Ich möchte einen ähnlichen Effekt mit Adam Shaws FullCalendar. Momentan wird die Größe mit dem Fenster geändert, aber ich möchte, dass es einen Tag (basicDay-Ansicht) anzeigt, wenn der Browser 480px oder weniger ist, eine Woche (die Basisansicht), wenn das Ansichtsfenster unter 767 ist, und die Monatsansicht vollständig -großes Fenster.

Bin ich besser in der Lage, drei verschiedene Kalender für unterschiedlich große Browser zu initialisieren?

dh:

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

Oder gibt es eine viel einfachere, einfachere Lösung?

Außerdem bin ich wirklich neu hier Ich weiß, dass der obige Beispielcode nicht wie geschrieben funktioniert, aber bin ich zumindest auf dem richtigen Weg?

Danke und Entschuldigung, wenn das irgendwo anders geschrieben ist, ich konnte es nicht finden, wäre aber froh, wenn mir jemand in die richtige Richtung zeigen würde.

UPDATE:

Als Reaktion auf den ersten Kommentar, es zum Laufen zu bringen ich in die fullcalendar.js ging und verändern, wie die Haupt-Rendering-Werke (Linie 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') 
    }; 

} 

Wie Sie können sehen, ich habe das "if ($ (window) .width ...") hinzugefügt, aber dies ist keine ausgezeichnete Lösung für sich allein, weil es nur die Hälfte meines Problems löst. Das anfängliche Rendering ist sowohl im mobilen als auch im Browser korrekt Windows, aber der Kalender reagiert nicht auf die Größenänderung in Browserfenstern Razyness 'Antwort mit der obigen Lösung löste das Problem der Größenanpassung in Browsern.

Meine Ansicht sieht nun wie folgt aus:

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> 

Hinweis: ich die Header-Einstellungen geändert, aber diese

Hoffentlich erfüllt eine oder eine Kombination dieser beiden Taktiken Ihre Bedürfnisse, wenn Sie eine Lösung haben, die einfacher ist, oder eine Antwort vorschlägt, springen Sie bitte und vielen Dank für die Hilfe.

Answer 1

Es sieht so aus, als ob Sie versuchen, die Ansicht basierend auf der Größenänderung zu ändern. Sehen Sie sich den windowResize-Rückruf an. http://arshaw.com/fullcalendar/docs/display/windowResize/.

Stellen Sie sicher, dass handleWindowResize der Standardwert ist, true. Oder der Rückruf wird nicht aufgerufen.

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