当您查看全日历上的议程日视图时,事件会占据整个屏幕。(差不多满了,滚动条附近有 2.5% 的截断。我认为这完全没有必要。我希望第一个事件占用一半,然后随着在同一时间段中添加更多事件而变得更小。有没有办法做到这一点?
我在这里查看了答案: 如何在 FullCalendar 中编辑事件宽度?
这两种方法都可以重新调整事件的大小,但是一旦将一堆事件添加到同一个插槽中,它们就会导致问题。我需要能够在一个插槽中放置至少 10 个事件,而不会重叠或 css 中断。
这可能吗?
当您查看全日历上的议程日视图时,事件会占据整个屏幕。(差不多满了,滚动条附近有 2.5% 的截断。我认为这完全没有必要。我希望第一个事件占用一半,然后随着在同一时间段中添加更多事件而变得更小。有没有办法做到这一点?
我在这里查看了答案: 如何在 FullCalendar 中编辑事件宽度?
这两种方法都可以重新调整事件的大小,但是一旦将一堆事件添加到同一个插槽中,它们就会导致问题。我需要能够在一个插槽中放置至少 10 个事件,而不会重叠或 css 中断。
这可能吗?
我已经研究了一段时间,首先确保您将 slotEventOverlap 设置为 false。我的解决方案是 eventAfterRender 回调中的以下代码:
eventAfterRender: function(event, element, view)
{
if (view.name == "agendaDay")
{
var width = $(element).width();
width = (width / 4) * numEvents(event.start); // Where 4 is the maximum events allowed at that time.
$(element).css('width', width + 'px');
}
}
numEvents 函数返回当时有多少事件:
function numEvents(date)
{
totalEvents = $('#calendar').fullCalendar('clientEvents').length;
var count = 0;
for (i = 0; i < totalEvents; i++)
{
if ($('#calendar').fullCalendar('clientEvents')[i].start.getTime() == date.getTime())
{
count++;
}
}
return count;
}
希望这有点用!