FullCalendar JS - TimeGrid 上的样式问题答案

【问题标题】：FullCalendar JS - Styling issue on TimeGridFullCalendar JS - TimeGrid 上的样式问题
【发布时间】：2020-02-29 17:27:04
【问题描述】：

我正在使用 FullCalendar 插件：https://fullcalendar.io/

由于某种原因，在加载时间网格视图时，标题没有正确切断，如下面的屏幕截图所示

下面是初始化日历的代码

 function SetupAndRenderCalendar() {
    var calendarEl = document.getElementById('calendar');

    calendar = new FullCalendar.Calendar(calendarEl, {
        height: 'parent',
        plugins: ['dayGrid', 'timeGrid'],
        defaultView: 'dayGridMonth',
        header: { center: 'dayGridMonth,timeGridWeek' },
        minTime: "06:00:00",
        maxTime: "20:00:00",

    });

    calendar.render();
}

我看到一些 StackOverflow 帖子建议给 css 类一个自定义覆盖，像这样

<style>
.fc-time-grid-event {
    margin-bottom: 1px;
    white-space:nowrap;
}
</style>

老实说，我不喜欢这种解决方案，因为当事件 div 足够大时，文本没有很好地换行。

我检查了网站上的演示，当标题很长时，包装没有问题，所以它一定是我这边的一个错误。

所以问题是，我做错了什么以及如何让标题正确换行？

【问题讨论】：

从屏幕截图看来，您的页面中可能有一些自定义 CSS（通过 fullCalendar 主题，或者对 fullCalendar CSS 文件的更改，或者您自己添加的一些额外 CSS）？或者您有没有通过eventRender 回调自定义事件的外观？到目前为止，这些事情是此类问题的最可能原因。我注意到事件也出现在网格中稍微错误的位置，这是 CSS 问题的另一个症状。将其剥离回由 fullCalendar 提供的原始默认 CSS，看看是否还有问题。
很棒的提示！现在要尝试一下，看看布局页面上是否有一些更高级别的自定义 css 导致问题。
@ADyson 你是对的。问题是该项目使用了 Metronic 主题，该主题覆盖了默认行为并导致了问题。

标签： javascript html css fullcalendar fullcalendar-4

【解决方案1】：

根据 ADyson 的评论，CSS 在更高的层面上发生了一些事情。

发生的事情是我们使用了一个商店购买的主题 (Metronic)，该主题具有自定义 css 用于 FullCalendar 的外观。

然后我将以下代码添加到自定义 css 并解决了问题。

.fc-time-grid-event .fc-content {
overflow: hidden;
max-height: 100%;

}

不确定这对其他人是否有帮助，但你永远不知道。

【讨论】：