在此先感謝。至於如何定製Fullcalendar Scheduler的持續時間
我正在努力與自定義fullcalendar調度程序的東西。
我只是想顯示像下面這樣的weektimetable。當然,這不是我想要的答案。)
正如你所看到的,在原始fullcalendar計劃程序的週轉時,你不能有相同的y點通過一個事件,我想定製這個。
取悅你的建議,感謝
在此先感謝。至於如何定製Fullcalendar Scheduler的持續時間
我正在努力與自定義fullcalendar調度程序的東西。
我只是想顯示像下面這樣的weektimetable。當然,這不是我想要的答案。)
正如你所看到的,在原始fullcalendar計劃程序的週轉時,你不能有相同的y點通過一個事件,我想定製這個。
取悅你的建議,感謝
沒有看到你使用創建此方案的具體事件數據,這是很難確定的問題是什麼。但這裏是我的建議:
我認爲你想要兩個並排的事件,但只要他們的時間重疊,你永遠不會。即使時間不重疊,如果事件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>
因此,總之,爲了得到你想要的效果,你必須確保
謝謝。我沒有注意到持續時間。其實,在你做之前,我已經解決了這個問題。 –
@JasonSon沒問題。如果答案幫助你/確認了你的理解,請考慮將其標記爲已接受,以便將來的讀者知道這是有用的信息。謝謝。 – ADyson
我想使它像第二槍。我希望你明白我的意圖。 –