事件不應該在fullcalendar的月視圖中重疊

Question

我正在使用fullcalendar生成事件日曆 - 下面是我的輸出圖片。

有沒有一種方法，使在給定時間的新事件的開始（不佔用與其他事件的不亦樂乎/重疊）？像slotEventOverlap，但少插槽和更多的事件。

This answer comes close - 我想我可以在我的情況下實現這一點，但它似乎過於複雜。有沒有更簡單的方法來做到這一點，我只是找不到它？

Answer 1

這裏有一個稍微修改後的版本，修復從事件，在一週和/或小於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"); 
      }