twitter-bootstrap 如何让 Adam Shaw 的 FullCalendar 在 rails 4 应用程序中显示响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18195906/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I get Adam Shaw's FullCalendar to display responsive in a rails 4 app
提问by Joe Susnick
I'm using Ruby 2 Rails 4. I'm using the twitter-bootstrap-rails gem to get my navbar to collapse on browser resize.
我正在使用 Ruby 2 Rails 4。我正在使用 twitter-bootstrap-rails gem 让我的导航栏在浏览器调整大小时折叠。
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.
我想要与 Adam Shaw 的 FullCalendar 类似的效果。现在它会随着窗口调整大小，但我希望它在浏览器为 480px 或以下时显示一天（basicDay 视图），当视口低于 767 时显示一周（basicWeek 视图），以及完整的月视图- 大小的窗口。
Am I better off initializing three different calendars in the event of different sized browsers?
如果浏览器大小不同，我最好初始化三个不同的日历吗？
ie:
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)
为了回应第一条评论，为了让它工作，我进入了 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')
};
}
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.
如您所见，我添加了“if ( $(window).width...” 但是，这本身并不是一个很好的解决方案，因为它只解决了我的一半问题。初始渲染在移动设备和移动设备中都是正确的浏览器窗口，但日历不响应在浏览器窗口中调整大小。将 MarCrazyness 的回答与上述解决方案结合解决了在浏览器中调整大小的问题。
My view now looks like this:
我的观点现在是这样的：
Schedule.html.erb$(document).ready(function() {
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.
希望这两种策略中的一种或两种策略的组合满足您的需求，如果您有更简单的解决方案，或者提出任何一个答案，请加入并非常感谢大家的帮助。
回答by MarCrazyness
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/.
看起来您正在尝试根据调整大小更改视图。看看 windowResize 回调。http://arshaw.com/fullcalendar/docs/display/windowResize/。
Make sure handleWindowResize is it's default value, true. Or the callback won't be invoked.
确保 handleWindowResize 是它的默认值，true。否则回调将不会被调用。
windowResize: function(view) {
if ($(window).width() < 514){
$('#calendar').fullCalendar( 'changeView', 'basicDay' );
} else {
$('#calendar').fullCalendar( 'changeView', 'month' );
}
}
