Fullcalendar：缩小/扩大日历高度 [英] Fullcalendar: shrink/expand calendar height

问题描述

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

This is the calendar I have, however, I'd like for it to be shrunk down a bit. When I do this with the following command I get a truncated schedule instead of a compressed one. Take a look:

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

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

Calendar before resizing with the above command:

尝试调整大小后的日历：

Calendar after trying to resize:

你可以看到滚动条已经出现，并且一些事件不再存在（直到我滚动）。我玩过CSS来尝试手动调整大小（特别是使用.fc-slats> table height和#calendar字体大小），但这些很难处理，并且在动态更改时创建错误放置的事件。我需要能够动态垂直缩放日历，最好使用JQuery。这怎么能实现？

You can see a scrollbar has appeared and some events are no longer present (until I scroll). I have played around with CSS to try resizing it manually (notably with the .fc-slats > table height and #calendar font-size) but these are very hard to work with and create misplaced events when changed dynamically. I need to be able to vertically shrink/expand the calendar dynamically, preferably using JQuery. How can this be achieved?

在此先感谢。

推荐答案

只需将此CSS添加到您拥有日历DIV的页面中

Just add this css to the page you have your calender "DIV"

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

这篇关于Fullcalendar：缩小/扩大日历高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！