我正在使用 Ruby 2 Rails 4。我正在使用 twitter-bootstrap-rails gem 让我的导航栏在浏览器调整大小时折叠。
我想要与 Adam Shaw 的 FullCalendar 类似的效果。现在它会随着窗口调整大小，但我希望它在浏览器为 480px 或以下时显示一天（basicDay 视图），当视口低于 767 时显示一周（basicWeek 视图），以及完整的月视图大小的窗口。
如果浏览器大小不同，我最好初始化三个不同的日历吗？
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>
还是有更简单、更简单的解决方案？
另外，我真的很陌生，我知道上面的示例代码不会像写的那样工作，但至少我在正确的轨道上吗？
谢谢和抱歉，如果这是在其他地方写的，我找不到它，但如果有人指出我正确的方向，我会很高兴。
更新：
为了回应第一条评论，为了让它正常工作，我进入了 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,next'
},
windowResize: function(view) {
if ($(window).width() < 514){
$('#calendar').fullCalendar( 'changeView', 'agendaDay' );
} else {
$('#calendar').fullCalendar( 'changeView', 'agendaWeek' );
}
}
});
});
</script>
注意：我更改了标题设置，但这绝不是此解决方案正常工作所必需的。
希望这两种策略中的一种或组合能够满足您的需求，如果您有更简单的解决方案，或者提出任何一个答案，请加入并非常感谢大家的帮助。