至于如何定制Fullcalendar Scheduler的持续时间

Question

在此先感谢。

我正在努力与自定义fullcalendar调度程序的东西。

我只是想显示像下面这样的weektimetable。当然，这不是我想要的答案。）

正如你所看到的，在原始fullcalendar计划程序的周转时，你不能有相同的y点通过一个事件，我想定制这个。

取悦你的建议，感谢

enter image description here

enter image description here

Answer 1

没有看到你使用创建此方案的具体事件数据，这是很难确定的问题是什么。但这里是我的建议：

我认为你想要两个并排的事件，但只要他们的时间重叠，你永远不会。即使时间不重叠，如果事件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>

因此，总之，为了得到你想要的效果，你必须确保

• 你的事件不按日期或时间上重叠，并
• 配置的插槽持续时间足够短以允许日历将事件并排放置在单独的插槽中。