使用 'height:auto' 进行全日历 timeGridWeek 视图答案

【问题标题】：Using 'height:auto' for fullcalendar timeGridWeek view使用 'height:auto' 进行全日历 timeGridWeek 视图
【发布时间】：2020-10-19 13:32:31
【问题描述】：

我想要一个完全可见的全日历周网格，没有滚动条。根据文档https://fullcalendar.io/docs/height 我应该将高度设置为“自动”。这将适合网格，并且不会显示任何滚动条。但是在使用 timeGridWeek 视图时这样做，并非所有时间都可以访问。

我创建了一个小测试应用程序：https://codepen.io/olafxso/pen/LYZZmBN

在测试用例中，您可以看到它没有滚动条，但并非所有时隙都可见。

我已经发现我可以通过更改一些 css 来控制它：

.fc .fc-timegrid-slot {
  height: 12px; /*This will change the actual timeslot height*/
}
.fc .fc-scrollgrid-section-body table {
  font-size: 1px; /** This allows me to make a timeslot smaller then the original font-size */
}

但我认为更改 css 字体大小不是可行的方法。有没有人对此案有更好的方法？

谢谢！

【问题讨论】：

标签： html css fullcalendar fullcalendar-5

【解决方案1】：

该问题与 fullCalendar 没有直接关系。问题在于您放置它的容器。

您已将整个主体设置为溢出：隐藏，然后将日历的容器设置为边界为视口边缘的固定位置。

不幸的是，尤其是在 CodePen 中（无论如何，代码占据了屏幕的一半），实际上没有足够的空间将日历实际放入视口中，所以它会向下溢出 - 但是你已经告诉 CSS此区域已隐藏。

如果您只是摆脱所有这些限制，那么它就可以正常工作 - 将您的 CSS 减少到以下内容：

html, body {
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

.fc-header-toolbar {
  /*
  the calendar will be butting up against the edges,
  but let's scoot in the header's buttons
  */
  padding-top: 1em;
  padding-left: 1em;
  padding-right: 1em;
}

日历本身没有滚动条（根据文档）。您的整个页面确实如此，但这只是因为视口不足以容纳日历。如果你有一个足够高的视口，那么就不会有滚动。您需要考虑到不同设备和浏览器的尺寸不同这一事实！

演示：https://codepen.io/ADyson82/pen/mdErVow

【讨论】：