更改完整日历的议程日视图中的默认事件宽度

Change default event width in agendaDay view for fullcalendar

本文关键字：默认 事件 视图 日历 程日      更新时间：2023-09-26

当您查看完整日历上的agendaDay视图时，事件会占据全屏。（几乎满了，滚动条附近有 2.5% 的截断。我认为这是完全没有必要的。我希望第一个事件可能占其中的一半，然后随着在同一时间段中添加更多事件而变小。有什么办法可以做到这一点吗？

我在这里看了答案：如何在全日历中编辑事件的宽度？

在这里：在"全日历"中编辑活动的宽度

这两种方法都可用于重新调整事件大小，但是一旦在同一插槽中添加了一堆事件，它们就会引起问题。我需要能够在一个插槽中放置至少 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;
}

希望这有一些用处！

相关文章：