javascript - FullCalendar JS - TimeGrid 上的样式问题

Question

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

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

下面是初始化日历的代码

 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 足够大时，它没有很好地包装文本。

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

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

Answer 1

根据 ADyson 的评论，CSS 在更高级别上发生了一些变化。

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

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

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

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