2017-09-15 44 views
2

有沒有辦法避免事件重疊; 類似eventOverlap:在fullcalendar配置中爲false, 但另一方面允許爲後臺事件重疊?允許eventOverlap僅用於完整日曆的後臺事件

我想將一些事件作爲後臺事件渲染到我的日曆中,就像信息(在其他日曆中已經有一些事件),但允許我創建,移動或調整我的新事件的頂部。

但是所有其他事件不允許在此日曆中重疊。

我只是試試這個,沒有成功:

calendar:{ 
     editable: true, 
     contentHeight: 'auto', 
     theme: true, 
     firstDay: 1, 
     eventOverlap: false, 
     nowIndicator: true, 
     allDaySlot: false, 
     slotDuration: '01:00:00', 
     snapDuration: '00:00:01', 
     axisFormat: 'HH:mm', 
     timeFormat: 'HH:mm', 
     timezone: 'local', 
     views: { 
     listThreeDay: { 
      type: 'list', 
      duration: { days: 3 }, 
      buttonText: 'list 3 day' 
     }, 
     listOneWeek: { 
      type: 'list', 
      duration: { weeks: 1 }, 
      buttonText: 'list week' 
     } 
     }, 
     businessHours: { 
     start: '06:00',   // a start time (6am in this example) 
     end: '18:00',   // an end time (6pm in this example) 
     dow: [ 1, 2, 3, 4, 5 ] // days of week (here monday till friday) 
     }, 
     events: [ 
     { 
      start: '00:00:00+02:00', 
      end: '08:00:00+02:00', 
      color: 'red', 
      rendering: 'background', 
      dow: [1], 
      overlap: true, 
     } 
     ], 
    ... 

下圖爲我需要什麼:

  • 背景事件(紅色)
  • 正常事件(藍色)重疊的背景事件
  • 正常事件(藍色)與其他正常事件不重疊

enter image description here

+0

沒有成功意味着什麼?什麼是不正確的塞納里奧,什麼是正確的方案?它阻止了你重疊背景事件?或者它允許你仍然重疊其他事件?或兩者?或者是其他東西。對不起,如果我錯過了這一點,但對我來說,並不是100%清楚問題是什麼。也許一個具體的例子會有幫助。 – ADyson

+0

問題是,它也忽略了背景事件的重疊; 但我需要背景事件就像可視塊(啓用事件重疊) – Jorgen

+0

「忽略事件重疊」。你的意思是它允許事件重疊的這些背景事件,或不允許它?在這種情況下,日曆其餘部分的行爲是什麼?這就是我的意思是你的描述不清楚。 – ADyson

回答

2

您可以在eventOverlap回調上使用相當簡單的自定義函數來實現此目的。簡單測試被重疊在該事件是否是後臺事件與否:

eventOverlap: function(stillEvent, movingEvent) { 
    return stillEvent.rendering == "background"; 
} 

你也不需要任何您的個人背景事件的指定overlap: true

工作示例可以在這裏看到:http://jsfiddle.net/sbxpv25p/18/

https://fullcalendar.io/docs/event_ui/eventOverlap/解釋了有關使用自定義函數的這個回調。

N.B.您可能已經意識到這一點,但值得指出的是:如果您計劃將新拖動/調整大小的事件保存回數據庫,則還需要仔細檢查服務器上的重疊規則,因爲任何寫入的規則具有瀏覽器開發人員工具知識的任何人都可以輕鬆地禁用或繞過JavaScript。這些前端規則僅適用於用戶友好性 - 它們不能100%依賴於驗證您的數據。

+0

thx爲好提示。我會試試看,這似乎是最好的解決方案。在添加到數據庫之前檢查後端事件已經完成 - 對於此項目非常重要;) – Jorgen

+0

沒問題。如果答案可以幫助你,請記住加註和/或標記爲已接受的答案 - 謝謝:-) – ADyson