Fullcalendar：缩小/扩大日历高度答案

【问题标题】：Fullcalendar: shrink/expand calendar heightFullcalendar：缩小/扩大日历高度
【发布时间】：2017-09-08 03:22:19
【问题描述】：

这是我的日历，不过，我希望它缩小一点。当我使用以下命令执行此操作时，我会得到一个截断的时间表而不是压缩的时间表。看看：

$('#calendar').fullCalendar('option', 'height', 200);
                       ---OR WITH---
$('#calendar').fullCalendar('option', 'contentHeight', 200);

使用上述命令调整大小之前的日历：

尝试调整大小后的日历：

您可以看到出现了滚动条，并且某些事件不再存在（直到我滚动）。我玩过 CSS 来尝试手动调整它的大小（特别是使用 .fc-slats > table height 和 #calendar font-size），但是这些很难使用，并且在动态更改时会创建错位的事件。我需要能够动态地垂直收缩/扩展日历，最好使用 JQuery。如何实现？

提前致谢。

【问题讨论】：

当用户单击按钮时，我也在尝试逐步缩小日历调度程序的高度。有没有办法做到这一点，比如应用 css zoom: 0.75; 但不使用它？
我已经放弃了我的日程安排应用程序，因为它被其他人接管了。我无法找到可靠地解决此问题的好方法。如果你找到方法，请发布解决方案，也许代码库已经进化了一点。

标签： javascript jquery html css fullcalendar

【解决方案1】：

只需将此css添加到您拥有日历“DIV”的页面

.fc-time-grid .fc-slats td {
  height: 1em;  /* Edit as required */
}

【讨论】：

虽然只是缩小了这么多......即使 height: 0 日历也很大。我想进一步缩小它。谢谢！

【解决方案2】：

我找到了一种“缩小”FullCalendar 的不完美方法……这似乎是唯一的方法。

使用 CSS zoom 属性，它在 Chrome 60、Opera 47 和 IE 11 中提供了很好的结果（令人惊讶！一次。）...但遗憾的是，它只是没有响应全部在 Firefox 55 中。

MDN cross-browser compatibility table in the zoom page 已经过时了……这就是我提到我测试的浏览器的原因。也许一些 SO 用户可以讲述 Safari 和其他浏览器......手机等。

所以，我认为这是您更好的选择...或者使用滚动条 （可以通过 CSS 改进）。

在this CodePen 中，您可以切换课程以在 100% 和 75% 之间缩放日历。

.shrinked{
  zoom: 0.75;
}

【讨论】：

这已被广泛贬值。然而，它给了我尝试 css 转换的想法。显着缩放。谢谢！
使用transform:scale(0.75);... 是的，它有效。直到您在日历中有一些事件并注意到它们放错了位置（不在正确的“单元格”中）。