Question

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

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

Answer 1

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

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

所以基本上你可以编辑.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: "\000A0-\000A0"; /* seperate with a dash, wrapped in nbsp's */
}

Answer 2

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

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

Answer 3

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

之后的部分

.fc-time-grid-event.fc-short .fc-time:before {
    /* in short mode, only data-start and data-full are available */
    content: attr(data-full);
}

.fc-time-grid-event.fc-short .fc-time:after {
    /* remove the trailing - after you change the content from data-start to data-full */
    content: "";
}

.fc-time-grid-event.fc-short .fc-title:before {
    content: "\00a0"; /* when a title exists along with the short time pad it with something like a nbsp*/
}

fullcalendar单槽事件结束时间

3 个答案: