完整的日历适合容器并隐藏滚动答案

【问题标题】：Full calendar fit to container and hide scroll完整的日历适合容器并隐藏滚动
【发布时间】：2013-05-14 01:45:30
【问题描述】：

我不知道如何缩放 fullcalendar 以适应它的父容器。我想在一个页面上为用户显示周视图而无需滚动（因此他们可以快速查看一周的项目）。

如果我需要使文本变小、插槽高度变小等，我可以，但我只是不确定如何根据浏览器窗口的大小动态地执行此操作。
（在我的日历中，我使用的是slotMinutes:10 and times from 8am to 10pm）
带有完整日历的 jsfiddle：http://jsfiddle.net/bQXYp/27/

【问题讨论】：

标签： javascript jquery fullcalendar

【解决方案1】：

我刚刚用下面的代码解决了我的问题

.fc-day-grid-container.fc-scroller {
    height: auto!important;
    overflow-y: auto;
}

【讨论】：

干净简单，就像我喜欢的那样

【解决方案2】：

有几个因素需要考虑。

如果您想坚持将slotMinutes 设置为 10，那么在不手动将字体大小调整为几乎难以辨认的情况下，很难将上午 8 点到晚上 10 点的时间范围调整到页面上。

如果您可以将 slotMinutes 属性增加到 30 甚至 60 之类的值，那么您很有可能无需滚动即可显示每周视图。

除此之外，您还可以使用两个属性来影响日历的尺寸。第一个是height。但是，这会设置一个不会动态缩放的像素值。第二个是aspectRatio，它允许定义宽高比。换句话说，aspectRatio 的值为 2 意味着它将尝试将高度拉伸为宽度的两倍（如果需要该高度）。

I have set up an example here 向您展示了具有合理的slotMinutes 值的效果。在我看来，这是实现您所需要的最重要的。

【讨论】：

我认为你是对的。我最终得到的是：添加两个按钮：zoomIn 和 ZoomOut。每次用户点击时，我都会将 slotMinutes 更改为不同的值。谢谢

【解决方案3】：

我在列表视图中使用它来显示所有即将发生的事件。我添加到我自己的 CSS-

.fc-scroller {
height: auto!important;
overflow-y: auto;

【讨论】：

【解决方案4】：

嗨，我正在使用两个视图（月和议程日），当我切换到日视图时，我会更改 contentHeight，如下所示：

viewDisplay: function(view) {  
       //alert(view.name)   
            if(view.name == 'agendaDay')
            {
                $('#calendar').fullCalendar('option', 'contentHeight', 700);                        
            }else{
                $('#calendar').fullCalendar('option', 'contentHeight', 200);
   }
 }

也许它可以为您想要做的事情提供一些方向；）

【讨论】：

【解决方案5】：

试试 contentHeight 属性： http://arshaw.com/fullcalendar/docs/display/contentHeight/

使用您想要的 minTime 和 maxTime 这将删除该 jsfiddle 示例中 FullCalendar 内容区域上的垂直滚动条：

contentHeight: 1850,        
minTime: '8',
maxTime: '22',

（但请确保不要设置 aspectRatio，因为这似乎会覆盖 contentHeight）

尽管 Karancan 提到要在不滚动的情况下适应一个屏幕，但您需要将字体大小减小到几乎无法阅读的大小。

（如果您使用的是 IE8，那么您可能会遇到其他高度问题..）

【讨论】：

【解决方案6】：

这对我也有用。我打开了 fullcalendar.css 并滚动到 fc-scroller。添加了高度并按照建议更改了溢出-y 选项。日历月视图工作 100%

【讨论】：