FullCalendar JS - TimeGrid 上的样式问题

Question

我正在使用 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();
}

我看到一些 Whosebug 帖子建议给 css class 一个像这样的自定义覆盖

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

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

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

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

Answer 1

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

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

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

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

}

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

FullCalendar JS - TimeGrid 上的样式问题

FullCalendar JS - Styling issue on TimeGrid

javascript

html

css

fullcalendar

fullcalendar-4