javascript 适合容器的完整日历并隐藏滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16533877/
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
Full calendar fit to container and hide scroll
提问by user194076
I cannot figure out how to scale fullcalendar to fit to it's parent container. I want to display week view on a single page for users without need to scroll (So they quickly review items for a week).
我无法弄清楚如何缩放 fullcalendar 以适应它的父容器。我想在单个页面上为用户显示周视图而无需滚动（因此他们可以快速查看一周的项目）。
I'm ok if I need to make text small, slots height smaller, etc, but I just not sure how to do this dynamically based on the size of the browser window.
(In my calendar I'm using slotMinutes:10 and times from 8am to 10pm)
jsfiddle with fullcalendar: http://jsfiddle.net/bQXYp/27/
如果我需要使文本变小、插槽高度变小等，我没问题，但我只是不确定如何根据浏览器窗口的大小动态执行此操作。
（在我的日历中，我正在使用slotMinutes:10 and times from 8am to 10pm）
带有 fullcalendar 的 jsfiddle：http: //jsfiddle.net/bQXYp/27/
采纳答案by karancan
There are several factors to be considered.
有几个因素需要考虑。
If you want to stick to having slotMinutesset to 10, then it is going to be quite difficult to fit time ranges from 8 AM to 10 PM on to the page without manually hacking the font size to be almost illegible.
如果您想坚持slotMinutes设置为 10，那么将上午 8 点到晚上 10 点的时间范围适合页面而不手动将字体大小修改为几乎难以辨认将是非常困难的。
If you are okay with increasing the slotMinutesattribute to something like 30 or even 60, you have a pretty good chance of getting your weekly view showing up without the need to scroll.
如果您可以将slotMinutes属性增加到 30 甚至 60 之类的值，那么您很有可能无需滚动即可显示每周视图。
Apart from that, there are two properties you could use to influence the dimensions of the calendar. The first one is height. However this sets a pixel value which does not scale dynamically. The second one is aspectRatiowhich allows to the define the ratio of width to height. In other words, aspectRatiovalue of 2 means that it will try and stretch the height to be double that of the width (if at all that amount of height is needed).
除此之外，您可以使用两个属性来影响日历的尺寸。第一个是height。然而，这会设置一个不会动态缩放的像素值。第二个是aspectRatio允许定义宽高比。换句话说，aspectRatio值为 2 意味着它会尝试将高度拉伸为宽度的两倍（如果需要那么高的数量）。
I have set up an example herethat shows you the effect of having a reasonable slotMinutesvalue. In my opinion, this is what will be most important to be able to achieve what you need.
我在这里设置了一个示例，向您展示了具有合理slotMinutes值的效果。在我看来，这是能够实现您所需要的最重要的东西。
回答by Asesha George
i just solved my problem with below code
我刚刚用下面的代码解决了我的问题
.fc-day-grid-container.fc-scroller {
height: auto!important;
overflow-y: auto;
}
回答by Henrique C.
Hi i am using two views ( month and agendaDay ) and when i switch to day view i change contentHeight like so:
嗨，我正在使用两个视图（月和议程日），当我切换到日视图时，我会像这样更改 contentHeight：
viewDisplay: function(view) {
//alert(view.name)
if(view.name == 'agendaDay')
{
$('#calendar').fullCalendar('option', 'contentHeight', 700);
}else{
$('#calendar').fullCalendar('option', 'contentHeight', 200);
}
}
Maybe it can give some direction for what you want to do ;)
也许它可以为您想要做的事情提供一些指导；）
回答by Drakum
I use it in list view to show all upcoming events. I added to my own CSS-
我在列表视图中使用它来显示所有即将发生的事件。我添加到我自己的 CSS-
.fc-scroller {
height: auto!important;
overflow-y: auto;
回答by sifty_tom
Try the contentHeight property: http://arshaw.com/fullcalendar/docs/display/contentHeight/
尝试 contentHeight 属性：http: //arshaw.com/fullcalendar/docs/display/contentHeight/
With your desired minTime and maxTime this removes the vertical scroll bar on the content area of the FullCalendar in that jsfiddle example:
使用您想要的 minTime 和 maxTime 这将删除该 jsfiddle 示例中 FullCalendar 内容区域上的垂直滚动条：
contentHeight: 1850,
minTime: '8',
maxTime: '22',
(But be sure not to set aspectRatio as that seems to over-ride the contentHeight)
（但一定不要设置 aspectRatio，因为这似乎覆盖了 contentHeight）
Although as Karancan mentions to fit to one screen without scrolling you'll need to reduce the font size to an almost unreadable size.
尽管正如Karancan 提到的在不滚动的情况下适应一个屏幕，但您需要将字体大小减小到几乎不可读的大小。
(and if you're using IE8 then you may have other issues with the height..)
（如果您使用的是 IE8，那么您的高度可能还有其他问题..）
回答by Steven Podrouzek
This worked for me too. I opened the fullcalendar.css and scrolled to fc-scroller. Added the height and changed the overflow-y option as was suggested. And the calendar month view worked 100%
这对我也有用。我打开 fullcalendar.css 并滚动到 fc-scroller。按照建议添加了高度并更改了溢出-y 选项。并且日历月视图工作 100%
