fullcalendar单槽事件结束时间

Posted 2021-03-29

我在agendaWeek视图中使用fullcalendar。我注意到，单个插槽中的事件，比方说30分钟，不显示结束时间。结束时间仅适用于覆盖多个插槽的事件。我发现的所有选项都没有将其添加到事件标题中。

这可能吗，我只是没有看到它？谢谢你的任何建议！

编辑：这是我指的工具。 http://fullcalendar.io/

答案

在函数renderEventTable中，如果事件小于30px，则会添加一个css类。

if (seg.bottom - seg.top < 30) {
    seg.el.addClass('fc-short');
}

所以基本上你可以编辑qazxsw poi的CSS样式。

.fc-short

另一答案

一个简单而且更好的解决方案是简单地添加css。这将显示[开始时间] - [结束时间] [标题]

fc-time-grid-event.fc-short .fc-time span {
    display: none; /* don't display the full time text... */
}

.fc-time-grid-event.fc-short .fc-time:before {
    content: attr(data-start); /* ...instead, display only the start time */
}

.fc-time-grid-event.fc-short .fc-time:after {
    content: "00A0-00A0"; /* seperate with a dash, wrapped in nbsp's */
}

另一答案

我同意只修改你需要它的风格更有意义，但@Abdullah只提供了一半的解决方案。不要忘记清除尾随 - 在.fc-time的后面部分

.fc-time-grid-event.fc-short .fc-time:before {
        content: attr(data-full); /* ...instead, display only the start time */
    }