如何以全高呈现 FullCalendar 2.9.0 实例？

Question

我想将远程 ICS 源加载到 Fullcalendar. However, since it's not natively possible, I use fc-remote-ical。

但是 fc-remote-ical 很旧并且使用 fullcalendar.js 版本 2.9.0，它不像最近的版本那样提供简单的全高选项。

任何人都可以建议合适的 CSS/JS 我可以添加到 Fullcalendar 的 this demo so that it behaves like the full-height example 吗？

感谢任何提示！

Answer 1

试试这些 CSS 规则。他们以你的例子为我工作。

#calendar 的 max-width 为 900px，因此请将其重置为 100%。
.fc-scroller.fc-day-grid-container 的宽度设置为 649px，因此请覆盖它。
.fc-day-grid.fc-unselectable需要设置高度才能延伸到页面
.fc-basic-view .fc-body .fc-row 有一些明确设置的高度。日历可能总是有 6 行，所以这就是我将它分成 6 的原因。如果只有五行，您可能需要使用 JS 向指定这些行的高度的 class 添加一个 class。

// controls width
#calendar {
    width: 100%;
    max-width: 100%;
}

// controls height
.fc-scroller.fc-day-grid-container {
    height: 89vh!important; // tweak this value to suit your needs
    overflow: hidden; // optional
}
.fc-scroller > .fc-day-grid, .fc-scroller > .fc-time-grid {
    height: 100vh!important;
}
.fc-day-grid.fc-unselectable {
    height: 100%!important;

// controls the height of each row
.fc-basic-view .fc-body .fc-row {
    min-height: 4em;
    height: calc(100% / 6) !important;
}

如何以全高呈现 FullCalendar 2.9.0 实例？

How to render a FullCalendar 2.9.0 instance at full height?

javascript

css

fullcalendar

icalendar