javascript - 全日历 : minTime wrongly calculate fc-not-start

标签 javascript css fullcalendar fullcalendar-scheduler fullcalendar-3

我正在使用 Fullcalendar 库,调度程序模块。

我使用 minTime 属性并将其设置为: View 定义内的“06:00:00”(这样“一天不是从午夜开始的”)。

但是当我这样做时,在 6h 之前开始的日历元素有一个类 fc-not-start 即使它们在日历的中间......

如何处理?

编辑:

一些附加信息:

全日历版本:v3.9.0

fc-not-start :此类应具有未在此 View 中启动的日历(预定)元素。 (开始是不可见的)。这是必需的,因为如果元素有一些圆 Angular ,边框,......如果开始不可见,它不应该在左侧。 (或者如果你想显示图标,你不是在看完整的元素)

例子: 在红色方 block 内,这是对fc-not-start

的正确使用

enter image description here

这是对fc-not-start的错误使用

enter image description here

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);
}

enter image description here

只有当元素在屏幕上不完全可见时才应该使用 <。在这种情况下,这个类被错误地计算了...

https://jsfiddle.net/Ly9rsoc1/2/

最佳答案

你说

"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/

相关文章:

javascript - 当其他 DIV 被移除时,动态创建的 DIV 不保持位置

html - 如何使一个 div 标签紧挨着另一个 div 标签

javascript - 使用 JSON 文件将事件加载到 FullCalender。这适用于多个用户吗?

javascript - Uncaught ReferenceError : Tooltip is not defined

javascript - fullCalendar:如何在 clientEvents 中按日期过滤?

javascript - POST 400(错误请求) polymer 应用程序

javascript - 如何使用 RingCentral Web 电话客户端库取消注册用户代理?

javascript - pubnub存储和播放历史记录功能

javascript - IE 8 浏览器不支持换行符 "\n"

html - 如何在 bootstrap col-lg-3 上固定宽度