全日历月视图中的事件不应重叠

Question

我正在使用 fullcalendar 生成事件日历 - 下面是我的输出图片。

有没有办法让新事件在给定时间开始（而不是占用一整天/与其他事件重叠）？像slotEventOverlap 这样的东西，但插槽更少，事件更多。

This answer comes close - 我想我可以在我的情况下实现这个，但它似乎过于复杂。有没有更简单的方法可以做到这一点，我就是找不到？

Answer 1

这是一个稍微修改过的版本，它解决了从一周中开始的事件和/或每天少于一个事件的问题

eventAfterRender: function(event, element) {

    var currentPosition = $(element).position();
    var currentWidth = $(element).width();
    var pixelsPerDay =  $(element).offsetParent().siblings("table").find(".fc-day-content").width();
    var pixelsPerHour = pixelsPerDay/24;

    //Start Time
    var startTimeOffset = (event.start.getHours() * pixelsPerHour);
    if ($(element).hasClass('fc-event-start')) {
        $(element).css('width', (currentWidth - startTimeOffset) + "px");
        $(element).css('left', (currentPosition.left + startTimeOffset) + "px");
    }

    //End Time
    currentWidth = currentWidth - startTimeOffset; //we have now a new width
    var endTimeOffset = pixelsPerDay - (event.end.getHours() * pixelsPerHour);
    if ($(element).hasClass('fc-event-end')) {
        $(element).css('width', currentWidth - endTimeOffset + "px");
    }

}

Answer 2

更新答案：

    eventAfterRender: function(event, element, view) {
      //only show title text once
      if (!$(element).hasClass('fc-event-start')) {
          $(element, 'fc-event-title').text(event.title);
          $(element, 'fc-event-title').css( "text-align","center" );
      };

      var sameDate = (event.start.getDate() === event.end.getDate() &&
                        event.start.getMonth() === event.end.getMonth())
      var pixelsPerDay =  $(element).offsetParent().siblings("table").find(
                                                   ".fc-day-content").width();
      var pixelsPerHour = pixelsPerDay/24
      var currentWidth = $(element).width()
      var currentPosition = $(element).position()
      var endTimeOffest = pixelsPerDay - (event.end.getHours() * pixelsPerHour)
      var endTimeNewWidth = currentWidth - endTimeOffest
      var startTimeOffset = pixelsPerDay - ((24 - event.start.getHours()) * pixelsPerHour)

      //push event bars down a bit so they don't crush the dates
      $(element).css('top', currentPosition.top + 13 + 'px');

      if ($(element).hasClass('fc-event-end')) {
          $(element).css('width', endTimeNewWidth + "px");
      };

      if ($(element).hasClass('fc-event-start') && !sameDate) {
          $(element).css('width', (currentWidth - startTimeOffset) + "px");
          $(element).css('left', (currentPosition.left + startTimeOffset) + "px");    
      };
    },

原答案：

我最终使用了此代码 - 尽管它仍在进行中。

eventAfterRender: function(event, element, view) {
    var pixelsPerDay =  $(element).offsetParent().siblings("table").find(".fc-day-content").width();
    var pixelsPerHour = pixelsPerDay/24
    var currentWidth = $(element).width()
    var currentPosition = $(element).position()
    var endTimeOffest = pixelsPerDay - (event.end.getHours() * pixelsPerHour)
    var endTimeNewWidth = currentWidth - endTimeOffest
    var startTimeOffset = pixelsPerDay - ((24 - event.start.getHours()) * pixelsPerHour)
    if ($(element).hasClass('fc-event-end')) {
        $(element).css('width', endTimeNewWidth + "px");
    };
    if ($(element).hasClass('fc-event-start')) {
        $(element).css('width', (currentWidth - startTimeOffset) + "px");
        $(element).css('left', (currentPosition.left + startTimeOffset) + "px");
        $(element).css('top', (currentPosition.top - 44) + "px")
    };
}

如果某个事件在一周中开始并且/或者是一个少于一天的事件，则会出现一些问题 - 这会导致格式化关闭，尽管可以通过注释掉以下行来解决它：

$(element).css('top', (currentPosition.top - 44) + "px")

Answer 3

请注意，此处的答案不适用于当前版本的 FullCalendar。我创建了另一个似乎确实有效的方法。

            eventRender: function(event, element, view) {
                var currentPosition = jQuery(element).position();
                var currentWidth = jQuery(element).width();
                var parent = jQuery(element).offsetParent();
                var siblings = parent.children("table");
                var pixelsPerWeek = siblings.width();
                var pixelsPerDay =  pixelsPerWeek/7;
                var pixelsPerHour = pixelsPerDay/24;

                //Start Time
                var startTimeOffset = (new Date(event.start).getHours() * pixelsPerHour);
                var newWidth = currentWidth;

                if ( jQuery(element).hasClass('fc-start') ) {
                    newWidth -= startTimeOffset;
                    jQuery(element).css('left', startTimeOffset + "px");
                }


                var end = new Date(event.end);
                var endTimeOffset = pixelsPerDay - (end.getHours() * pixelsPerHour);
                if ( jQuery(element).hasClass('fc-end') ) {
                    newWidth -= endTimeOffset;
                }

                jQuery(element).css('width', (newWidth) + "px");
            }