jquery - 如何让 Adam Shaw 的 FullCalendar 在 Rails 4 应用程序中显示响应式

Question

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

我想要 Adam Shaw 的 FullCalendar 具有类似的效果。现在它会随着窗口调整大小，但我希望当浏览器为 480px 或以下时显示一天(basicDay View )，当视口(viewport)低于 767 时显示一周(basicWeek View )，并以完整的方式显示月 View 大小的窗口。

如果浏览器大小不同，我最好初始化三个不同的日历吗？

即:

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

或者有更简单、更简单的解决方案吗？

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

谢谢，抱歉，如果这是在其他地方写的，我找不到它，但如果有人指出我正确的方向，我会很高兴。

更新:

为了响应第一条评论，为了让它正常工作，我进入了 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 的答案与上述解决方案结合起来解决了浏览器中调整大小的问题。

我的 View 现在看起来像这样:

Schedule.html.erb $(文档).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>

注意:我更改了 header 设置，但这对于此解决方案的工作来说绝不是必要的。

希望这两种策略中的一种或组合能够满足您的需求，如果您有更简单的解决方案，或提出任一答案，请加入并非常感谢大家的帮助。

Answer 1

看起来您正在尝试根据调整大小来更改 View 。看一下 windowResize 回调。 http://arshaw.com/fullcalendar/docs/display/windowResize/ .

确保handleWindowResize是它的默认值true。否则回调不会被调用。

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