7

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

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

4

6 回答 6

12

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

.fc-day-grid-container.fc-scroller {
    height: auto!important;
    overflow-y: auto;
}
于 2016-11-28T12:01:01.023 回答
2

有几个因素需要考虑。

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

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

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

我在这里设置了一个示例，向您展示了具有合理slotMinutes值的效果。在我看来，这是能够实现您所需要的最重要的。

于 2013-05-14T02:35:39.400 回答
2

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

.fc-scroller {
height: auto!important;
overflow-y: auto;
于 2017-10-23T18:44:26.597 回答
1

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

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

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

于 2013-05-16T20:27:37.277 回答
0

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

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

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

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

尽管正如 Karancan 提到的那样，要在不滚动的情况下适应一个屏幕，您需要将字体大小减小到几乎不可读的大小。

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

于 2013-05-14T06:44:03.163 回答
0

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%

于 2016-12-05T13:17:18.703 回答