2017-06-15 93 views
0

在此先感謝。至於如何定製Fullcalendar Scheduler的持續時間

我正在努力與自定義fullcalendar調度程序的東西。

我只是想顯示像下面這樣的weektimetable。當然,這不是我想要的答案。)

正如你所看到的,在原始fullcalendar計劃程序的週轉時,你不能有相同的y點通過一個事件,我想定製這個。

取悅你的建議,感謝

enter image description here

enter image description here

+0

我想使它像第二槍。我希望你明白我的意圖。 –

回答

0

沒有看到你使用創建此方案的具體事件數據,這是很難確定的問題是什麼。但這裏是我的建議:

我認爲你想要兩個並排的事件,但只要他們的時間重疊,你永遠不會。即使時間不重疊,如果事件1的結束和事件2的開始落在某個時隙的中間某處,它們仍將看起來重疊。

讓我們用下面的代碼片段說明這一點:

有在演示(向下滾動查看第二個)兩種曆法。兩個日曆都具有相同的資源和事件。

  • 第一個資源包含在同一天重疊的事件。 所以他們永遠不會被並排顯示。
  • 第二個資源包含不重疊的事件。在中午之前結束 ,第二天在同一天的中午開始。

在第一個日曆上,它們仍然顯示爲重疊,因爲日曆僅顯示一天內的事件。在整天的情況下,事件仍然重疊。當天只有1個插槽可以放置。

但是在第二個日曆中,第二個資源中的事件將並排顯示,因爲時間段持續時間(12小時)現在足夠短,以允許將事件放置到基於他們的開始/結束時間。

$(function() { // document ready 
 
    $('#calendar1').fullCalendar({ 
 
    schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source', 
 
    defaultView: 'timeline', 
 
    header: { 
 
     left: 'prev,next today', 
 
     center: 'title', 
 
     right: 'timeline' 
 
    }, 
 
    slotDuration: { 
 
     days: 1 
 
    }, 
 
    resources: [{ 
 
     "id": 1, 
 
     "title": "Screenshot 1" 
 
     }, 
 
     { 
 
     "id": 2, 
 
     "title": "Screenshot 2" 
 
     }, 
 
    ], 
 
    events: [{ 
 
     id: '1', 
 
     resourceId: "1", 
 
     start: '2017-06-01', 
 
     end: '2017-06-04', 
 
     title: 'event 1' 
 
     }, 
 
     { 
 
     id: '2', 
 
     resourceId: "1", 
 
     start: '2017-06-03', 
 
     end: '2017-06-06', 
 
     title: 'event 2' 
 
     }, 
 
     { 
 
     id: '3', 
 
     resourceId: "2", 
 
     start: '2017-06-01', 
 
     end: '2017-06-03T12:00', 
 
     title: 'event 3' 
 
     }, 
 
     { 
 
     id: '4', 
 
     resourceId: "2", 
 
     start: '2017-06-03T12:00', 
 
     end: '2017-06-06', 
 
     title: 'event 4' 
 
     } 
 
    ] 
 
    }); 
 

 
    $('#calendar2').fullCalendar({ 
 
    schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source', 
 
    defaultView: 'timeline', 
 
    header: { 
 
     left: 'prev,next today', 
 
     center: 'title', 
 
     right: 'timeline' 
 
    }, 
 
    slotDuration: { 
 
     hours: 12 
 
    }, 
 
    resources: [{ 
 
     "id": 1, 
 
     "title": "Screenshot 1" 
 
     }, 
 
     { 
 
     "id": 2, 
 
     "title": "Screenshot 2" 
 
     }, 
 
    ], 
 
    events: [{ 
 
     id: '1', 
 
     resourceId: "1", 
 
     start: '2017-06-01', 
 
     end: '2017-06-04', 
 
     title: 'event 1' 
 
     }, 
 
     { 
 
     id: '2', 
 
     resourceId: "1", 
 
     start: '2017-06-03', 
 
     end: '2017-06-06', 
 
     title: 'event 2' 
 
     }, 
 
     { 
 
     id: '3', 
 
     resourceId: "2", 
 
     start: '2017-06-01', 
 
     end: '2017-06-03T12:00', 
 
     title: 'event 3' 
 
     }, 
 
     { 
 
     id: '4', 
 
     resourceId: "2", 
 
     start: '2017-06-03T12:00', 
 
     end: '2017-06-06', 
 
     title: 'event 4' 
 
     } 
 
    ] 
 
    }); 
 

 
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" /> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" rel="stylesheet" media="all" /> 
 
<link href='https://fullcalendar.io/js/fullcalendar-scheduler-1.6.2/scheduler.min.css' rel='stylesheet' /> 
 
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.0/moment.min.js'></script> 
 
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script> 
 
<script src='https://fullcalendar.io/js/fullcalendar-scheduler-1.6.2/scheduler.min.js'></script> 
 

 
<div id='calendar1'></div> 
 
<br/><br/> 
 
<div id='calendar2'></div>

因此,總之,爲了得到你想要的效果,你必須確保

  • 你的事件不按日期或時間上重疊,並
  • 配置的插槽持續時間足夠短以允許日曆將事件並排放置在單獨的插槽中。
+0

謝謝。我沒有注意到持續時間。其實,在你做之前,我已經解決了這個問題。 –

+0

@JasonSon沒問題。如果答案幫助你/確認了你的理解,請考慮將其標記爲已接受,以便將來的讀者知道這是有用的信息。謝謝。 – ADyson