jquery – 如何让Adam Shaw的FullCalendar在rails 4 app中显示响应

我正在使用Ruby 2 Rails 4.我正在使用twitter-bootstrap-rails gem让我的导航栏在浏览器调整大小时崩溃.

我想要与Adam Shaw的FullCalendar类似的效果.现在它将调整窗口大小,但我希望它在浏览器为480px或更低时显示一天(basicDay视图),在视口低于767时显示一周(basicWeek视图),以及完整显示月视图大小的窗户.

在不同大小的浏览器中,我最好初始化三个不同的日历吗？

即：

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

还是有一个更简单,更简单的解决方案？

另外,我真的很陌生,我知道上面的示例代码不会像写的那样工作,但我至少在正确的轨道上吗？

谢谢,对不起,如果这是写在别的地方,我找不到,但如果有人指出我正确的方向会很高兴.

更新：

为了响应第一条评论,为了让它工作,我进入了fullcalendar.js并改变了主渲染的工作方式(第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')
    };

}

正如你所看到的,我添加了“if($(window).width …”但是,这本身并不是一个很好的解决方案,因为它只解决了我的一半问题.初始渲染在移动和浏览器窗口,但日历不响应浏览器窗口中的大小调整.将marcrazyness的答案与上面的解决方案结合起来解决了在浏览器中调整大小的问题.

我的观点现在看起来像这样：

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

注意：我更改了标头设置,但这对于此解决方案无效.

希望这两种策略中的一种或两种组合能够满足您的需求,如果您有一个更简单的解决方案,或者提出任何一个答案,请大家都非常感谢您,感谢所有人的帮助.

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