Question

我不喜欢这样一个事实：半小时的活动没有占用我日历中足够的空间，所以我使用下面的代码修改了元素：

$(document).ready(function() {
    $("#CalendarControl").fullCalendar({
        eventAfterRender: function(event, element, view) {
            var halfHour = 60 * 30 * 1000; // in milliseconds
            if((event.end - event.start) <= halfHour){
                element.height(40);
                element.find(".fc-event-time").text($.fullCalendar.formatDate(event.start, "HH:mm") + ' - ' + $.fullCalendar.formatDate(event.end, "HH:mm"));
                element.find("A").append("<span class=\"fc-event-title\"></span>")
                element.find(".fc-event-title").text(event.title);
            }
        }
    });
})

正如你所看到的，我基本上把它占用了与一小时长的事件相同的空间，并加上格式化。

唯一的麻烦是，它现在可以与旧事件重叠，因为先前的自动重叠代码已经发生（并且发现自己不需要），所以我需要一种方法再次渲染日历（使用我的更改）？

非常感谢。

Answer 1

所以半小时的活动占用了一个小时的空间？这听起来有点令人困惑，因为看起来它会在半小时后结束。如果你想改变所有事件的大小，可以尝试将defaultEventMinutes设置为大约15（这将使半小时事件占用两个时隙而不是一个）或甚至10（所以半小时事件需要最多3个插槽）。当然，您的小时活动也将占用更多空间，但这将为阅读日历的人提供正确的情况视图。

要更改行为，以便让日历尊重由eventAfterRender更改的人为大事件，您将不得不修改源中日历的碰撞检查代码。

如果您希望您的半小时活动实际是小时活动，您可以致电updateEvent使其成为事后一小时的事件。或者只是在数据源中更改它。

Answer 2

您是否尝试过设置超时来调用“rerenderEvents”？

   if((event.end - event.start) <= halfHour) {
     // ... whatever ...
     setTimeout(function() {
       $('#CalendarControl').fullCalendar('rerenderEvents');
     }, 10);
   }

Answer 3

我被指向使用eventRender而不是eventAfterRender，它在稍微不同的背景下适合我

例如

$(document).ready(function() {
  $("#CalendarControl").fullCalendar({
    eventRender: function(event, jqElement, view) {
      jqElement.height(40);
    }
  }
}

JQuery fullCalendar：使用eventAfterRender修改元素的问题

3 个答案: