How can I get Adam Shaw's FullCalendar to display responsive in a rails 4 app

Question

I'm using Ruby 2 Rails 4. I'm using the twitter-bootstrap-rails gem to get my navbar to collapse on browser resize.

I want a similar effect with Adam Shaw's FullCalendar. Right now it will resize with the window but I want it to display one day (the basicDay view) when the browser is 480px or below, one week (the basicWeek view) when the viewport is below 767, and the month view in a full-sized window.

Am I better off initializing three different calendars in the event of different sized browsers?

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>

Or is there a much easier, simpler solution?

Also, I'm really new at this I know the example code above won't work as written but am I on the right track at least?

Thanks and sorry if this is written somewhere else, I couldn't find it but would be glad if somebody pointed me in the right direction.

UPDATE:

In response to the first comment, to get it working I went into the fullcalendar.js and changed how the main rendering works (line 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')
    };

}

As you can see, I added the "if ( $(window).width..." however, this isn't an excellent solution by itself because it only solves half of my problem. The initial rendering is correct in both mobile and browser windows, but the calendar does not respond to resizing in browser windows. Incorporating MarCrazyness' answer with the solution above solved the issue of resizing in browsers.

My view now looks like this:

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>

Note: I changed the header settings but this is by no means necessary for this solution to work.

Hopefully one or a combination of these two tactics meets your needs, if you have a solution that is simpler, or advances either answer, please jump in and thank you very much, everyone, for all the help.

Answer 1

It looks like you are trying to change the view based on resize. Take a look at the windowResize callback. http://arshaw.com/fullcalendar/docs/display/windowResize/.

Make sure handleWindowResize is it's default value, true. Or the callback won't be invoked.

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