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

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

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

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

即：

 $(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' }, }); });  

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

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

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

更新：

为了响应第一条评论，为了让它工作，我进入了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 = $("
") .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的答案与上面的解决方案结合起来解决了在浏览器中resize的问题。

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

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' ); } } }); });  

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

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

Answer 1

看起来您正在尝试根据resize更改视图。 看一下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' ); } }