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

Question

我想将远程 ICS 提要加载到Fullcalendar中。但是，由于它本身不可能，我使用fc-remote-ical。但是 fc-remote-ical 很旧并且使用 fullcalendar.js 版本 2.9.0，它不像最近的版本那样提供简单的全高选项。任何人都可以建议我可以添加到这个演示中的适当的 CSS/JS ，以便它表现得像Fullcalendar 的全高示例吗？感谢您的任何提示！

Answer 1

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

• #calendar的最大宽度为900px，因此将其重置为100%.

• .fc-scroller.fc-day-grid-container宽度设置为 649px，因此请覆盖它。

• .fc-day-grid.fc-unselectable需要设置高度才能延伸到页面

• .fc-basic-view .fc-body .fc-row有一些明确设置的高度。日历可能总是有 6 行，所以这就是我将它分成 6 的原因。如果只有五行，您可能需要使用 JS 向该表添加一个类来指定这些行的高度。

// 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;

}