Comment puis-je obtenir de l'Adam Shaw FullCalendar pour afficher réactif dans les rails 4 app

Je suis en utilisant Ruby 2 Rails 4. Je suis en utilisant le twitter bootstrap-gem rails pour obtenir ma barre de navigation à l'effondrement du navigateur pour le redimensionner.

Je veux un effet similaire avec Adam Shaw FullCalendar. Droit maintenant, il va redimensionner la fenêtre, mais je veux qu'il affiche une seule journée (le basicDay vue) lorsque le navigateur est 480px ou ci-dessous, une semaine (le basicWeek vue) lorsque la fenêtre est en dessous de 767, et la vue du mois, dans un complet de la taille de la fenêtre.

Suis-je mieux de l'initialisation de trois calendriers différents dans le cas de différentes tailles, les navigateurs?

ie:

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

Ou est-il beaucoup plus facile, plus simple solution?

Aussi, je suis vraiment nouveau à cela, je sais que l'exemple de code ci-dessus ne fonctionne pas écrit, mais je suis sur la bonne voie, au moins?

Merci et désolé si c'est écrit quelque part d'autre, je ne pouvais pas le trouver, mais serais heureux si quelqu'un m'a orienté dans la bonne direction.

Mise à JOUR:

En réponse au premier commentaire, pour le faire fonctionner je suis allé dans le fullcalendar.js et changé la façon dont la principale rendu des travaux (ligne 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')
    };

}

Comme vous pouvez le voir, j'ai ajouté le "if ( $(window).largeur de..." cependant, ce n'est pas une excellente solution par lui-même, car elle ne résout qu'une moitié de mon problème. La première, le rendu est correct dans les deux mobiles et les fenêtres de navigateur, mais le calendrier ne répond pas de redimensionnement dans les fenêtres du navigateur. Intégrant MarCrazyness de réponse avec la solution ci-dessus ont résolu le problème de redimensionnement dans les navigateurs.

Mon point de vue, ressemble maintenant à ceci:

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

Note: j'ai changé l'en-tête paramètres, mais ce n'est pas les moyens nécessaires pour que cette solution fonctionne.

Nous espérons que l'un ou une combinaison de ces deux tactiques répond à vos besoins, si vous avez une solution plus simple, ou des avances, soit de répondre, veuillez sauter dans et merci beaucoup tout le monde, pour toute l'aide.