Fullcalendar：缩小/扩展日历高度

Question

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

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

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

尝试调整大小后

日历：

您可以看到滚动条已经出现，并且某些事件不再存在（直到我滚动）。我已经使用CSS来尝试手动调整它（特别是使用.fc-slats＆gt;表格高度和#calendar字体大小），但这些很难处理并在动态更改时创建错放的事件。我需要能够动态地垂直缩小/扩展日历，最好是使用JQuery。如何实现这一目标？

提前致谢。

Answer 1

只需将此css添加到您的日历“DIV”

页面即可

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

Answer 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;
}