Question

当您查看fullcalendar上的agendaDay视图时，事件会占据整个屏幕。（差不多满了，滚动条附近有2.5％的切断。我认为这是完全没必要的。我希望第一个事件可能占用一半，然后随着在同一时段添加更多事件而变小。有没有办法做到这一点？

我看过这里的答案： How to edit width of event in FullCalendar?

在这里： Edit width of event in FullCalendar

这两个都可以用于重新调整事件大小，但是一旦在同一个插槽中添加了一堆事件，它们就会引发问题。我需要能够在一个插槽中放置至少10个事件，而不会重叠或css中断。

这可能吗？

Answer 1

我一直在研究这个问题，首先要确保将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;
}

希望这有一些用处！

更改fullcalendar的agendaDay视图中的默认事件宽度

1 个答案: