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

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 意味着它将尝试将高度拉伸为宽度的两倍（如果确实需要该高度）。

我在这里举了一个例子，向您展示拥有合理值的效果slotMinutes。在我看来，这是实现您所需要的最重要的事情。