时间戳

首页 > 解决方案 > Fullcalendar : minTime 错误地计算 fc-not-start

javascript - Fullcalendar : minTime 错误地计算 fc-not-start

问题描述

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

我使用 minTime 属性并将其设置为： '06:00:00' 在视图定义内（这样“一天不是从午夜开始”）。

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

如何处理？

编辑 ：

一些附加信息：

全日历版本：v3.9.0

fc-not-start：这个类应该有没有在这个视图中启动的日历（计划）元素。（开始是看不见的）。这是必需的，因为如果元素有一些圆角，边框，......如果开始不可见，它不应该在左侧。（或者如果你想显示图标，你没有看到完整的元素）

示例：在红色方块内，这是正确使用fc-not-start

在此处输入图像描述

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

在此处输入图像描述

fc-not-start应该在 fullcalendar 库中计算自己并且它正在工作，直到我在视图中添加 参数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);
}

在此处输入图像描述

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

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

标签： javascriptcssfullcalendarfullcalendar-schedulerfullcalendar-3

解决方案

你说

“只有当元素在屏幕上不完全可见时，才应使用 <”

但是：您的事件在指定minTime值之前开始。这意味着事件的起点永远不会在您的日历上可见。因此<显示图标。

我认为您误解了此功能的性质。这与HTML 元素的开始是否可见无关，而是关于事件的开始（由该 HTML 元素表示）是否可见。并且由于您从显示中删除了该事件所涵盖的一些时间，因此它会显示图标，以便用户清楚地了解这一事实。

结论：日历的行为完全符合其应有的行为。这里没有错误。

顺便说一句，我要指出，如果您经常有涵盖一天中这些时间的事件，那么在我看来，让这些时间不可见是不合逻辑或非常用户友好的，因为它隐藏了可能有用的信息。但是，如果这些特定事件是异常情况，并且您的大多数事件发生在早上 7 点之后，那么您可能只需要将这些事件视为不寻常的情况。

推荐阅读