我正在使用 Fullcalendar 库,调度程序模块。
我使用 minTime 属性并将其设置为: View 定义内的“06:00:00”(这样“一天不是从午夜开始的”)。
但是当我这样做时,在 6h 之前开始的日历元素有一个类 fc-not-start
即使它们在日历的中间......
如何处理?
编辑:
一些附加信息:
全日历版本:v3.9.0
fc-not-start
:此类应具有未在此 View 中启动的日历(预定)元素。 (开始是不可见的)。这是必需的,因为如果元素有一些圆 Angular ,边框,......如果开始不可见,它不应该在左侧。 (或者如果你想显示图标,你不是在看完整的元素)
例子:
在红色方 block 内,这是对fc-not-start
这是对fc-not-start
的错误使用
fc-not-start
应该在 fullcalendar 库中自行计算并且它正在工作,直到我在 View 中添加参数 minTime
。
编辑 2:
我创建最少的代码来查看问题
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel='stylesheet' href='css/fullcalendar.css' />
<link rel='stylesheet' href='css/scheduler.css' />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel='stylesheet' href='css/style.css' />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id='calendar'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src='js/moment.js'></script>
<script src='js/fullcalendar.js'></script>
<script src='js/scheduler.js'></script>
<script src='js/my_script.js'></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</body>
</html>
JS
var resources = [
{
id: 'A',
title: 'A',
sortOrder: 1
},
{
id: 'B',
title: 'B',
sortOrder:2
},
{
id: 'C',
title: 'C',
sortOrder:3
}
];
$('#calendar').fullCalendar({
// height: 550,
// eventColor: '#428bca',
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
defaultView: 'timelineFourDays',
views: {
timelineFourDays: {
type: 'timeline',
minTime: '07:00:00',
duration: { days: 4 }
},
},
resources: resourcesFunc,
nowIndicator: true,
events: [
{
id: '1',
resourceId: 'A',
title: 'Meeting',
start: '2019-07-13T00:20:00',
end: '2019-07-14T02:20:00',
},
{
id: '2',
resourceId: 'A',
title: 'Meeting2',
start: '2019-07-13T00:20:00',
end: '2019-07-14T02:20:00',
}
],
displayEventTime: true,
});
function resourcesFunc(callback) {
callback(resources);
}
只有当元素在屏幕上不完全可见时才应该使用 <。在这种情况下,这个类被错误地计算了...
最佳答案
你说
"The < should be only if the element is not whole visible on screen"
但是:您的事件在指定的 minTime
之前开始值(value)。这意味着事件的起点永远不会在您的日历上显示。因此 <
显示图标。
我认为您误解了此功能的性质。这与 HTML 元素 的开始是否可见无关,而是与事件(由该 HTML 元素表示)的开始是否可见有关。由于您从显示中删除了该事件涵盖的一些时间,因此它会显示图标,以便用户清楚地了解这一事实。
总而言之:日历的行为完全符合预期。这里没有错误。
顺便说一句,我要指出的是,如果您经常有涵盖一天中这些时间的事件,那么在我看来,让这些时间不可见不是很合乎逻辑或对用户非常友好,因为它隐藏了可能有用的内容信息。但是,如果这些特定事件是异常事件,并且您的大部分事件发生在早上 7 点之后,那么您可能只需要将这些事件作为异常情况来容忍。
关于javascript - 全日历 : minTime wrongly calculate fc-not-start,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56987348/