Question

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

如果我需要缩小文字，缩小插槽高度等，我很好，但我根本不确定如何根据浏览器窗口的大小动态执行此操作。
（在我的日历中，我正在使用slotMinutes:10 and times from 8am to 10pm）
jsfiddle with fullcalendar：http://jsfiddle.net/bQXYp/27/

Answer 1

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

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

Answer 2

有几个因素需要考虑。

如果你想坚持将slotMinutes设置为10，那么将上午8点到晚上10点的时间范围放到页面上是非常困难的，而无需手动破解字体大小无法辨认。

如果您可以将slotMinutes属性增加到30或甚至60，那么您很有可能在不需要滚动的情况下显示每周视图。

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

I have set up an example here向您展示了合理slotMinutes值的效果。在我看来，能够达到你所需要的是最重要的。

Answer 3

您好我正在使用两个视图（month和agendaDay），当我切换到日视图时，我更改了contentHeight：

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

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

Answer 4

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

  --node-monitor-grace-period duration    Amount of time which we allow running Node to be unresponsive before marking it unhealthy. Must be N times more than kubelet's nodeStatusUpdateFrequency, where N means number of retries allowed for kubelet to post node status. (default 40s)
  --node-monitor-period duration          The period for syncing NodeStatus in NodeController. (default 5s)
  --node-startup-grace-period duration    Amount of time which we allow starting Node to be unresponsive before marking it unhealthy. (default 1m0s)

Answer 5

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

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

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

（但一定不要设置aspectRatio，因为它似乎覆盖了contentHeight）

虽然Karancan提到在不滚动的情况下适合一个屏幕，但您需要将字体大小缩小到几乎不可读的大小。

（如果您使用的是IE8，那么您可能还有其他高度问题。）

完整日历适合容器和隐藏滚动

5 个答案: