Fullcalendar Scheduler/Timeline Today未突出显示

我使用了最新的Fullcalendar Scheduler（Beta）组件。我想强调的是实际的今天和/或时间，但事实并非如此。

我看到"正常"的完整日历具有此功能。但不知何故，调度程序没有。我检查了DOM中的元素，但特定的单元格/列没有fc highlight类。

是不是我做错了什么？这个功能可以很容易地添加吗？

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link type='text/css' rel='stylesheet' href='../lib/fullcalendar.css' />
    <link type='text/css' rel='stylesheet' href='../lib/fullcalendar.print.css' media='print' />
    <link type='text/css' rel='stylesheet' href='../scheduler.min.css' />
    <link type='text/css' rel='stylesheet' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css'>
    <link type='text/css' rel='stylesheet' href='jquery.qtip.min.css' />        
    <link type='text/css' rel='stylesheet' href='pumper.css' />
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
    <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js'></script>
    <script src='../lib/moment.min.js'></script>        
    <script src='../lib/fullcalendar.min.js'></script>
    <script src='../scheduler.js'></script>
    <script src='jquery.qtip.min.js'></script>
    <script>
        $(document).ready(function() {
            var dialog, form,
            compo = $( "#compo" ),
            ltg = $( "#ltg" ),
            tank = $( "#tank" );
            var date = new Date();
            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();
            var calendar = $('#calendar').fullCalendar({
                editable: true,
                eventOverlap: false,
                //aspectRatio: 2.0,
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'timelineMonth2'},
                defaultView: 'timelineMonth2',
                views: {                
                    timelineMonth2: {
                        type: 'timeline',
                        slotLabelInterval: '24:00:00',
                        duration: { days: 5 },
                        slotDuration: '24:00:00',
                        buttonText: 'Monat'//,
                        //intervalStart: '1'
                    }
                },
                resourceLabelText: 'Movement',
                resourceAreaWidth: '130px',
                slotWidth: '10px',
                resources: {
                    url: 'streams.php',
                    type: 'POST'
                },
                events: "lots.php",
                eventRender: function(event, element, view) {
                },
                selectable: true,
                selectHelper: true,
                select: function(start, end, allDay, view1, resObj) {                   
                },
                editable: true,
                eventDrop: function(event, delta) {
                },
                eventResize: function(event) {
                }
            });
        });
    </script>
    <style>
    </style>
</head>
<body>
    <p>PumperLog</p>
    <div id='calendar'></div>       
</body>

我可以把它归结为这一段：

views: {                
    timelineMonth2: {
    type: 'timeline',
    slotLabelInterval: '24:00:00',
    duration: { days: 5 },
    slotDuration: '24:00:00',
    buttonText: 'Monat'//,
    //intervalStart: '1'
}

这很有效，确实给了我一个"日"网格。今天是重点。

但我想要一个更准确的网格，并突出显示小时。。。甚至10分钟的时段。。所以如果我选择这个：

views: {                
    timelineMonth2: {
    type: 'timeline',
    slotLabelInterval: '01:00:00',
    duration: { days: 5 },
    slotDuration: '01:00:00',
    buttonText: 'Monat'//,
    //intervalStart: '1'
}

它已经不起作用了。带有实际小时数的列不会高亮显示。对此我能做些什么吗？

我还没有尝试突出显示确切的时间，但以下是您需要在scheduler.js中修改的内容，以便它在时间轴视图中开始突出显示今天：

TimelineGrid.prototype.slatCellHtml = function(date, isEm) {
var classes;
if (this.isTimeScale) {
  classes = [];
  classes.push(isInt(divideRangeByDuration(this.start, date, this.labelInterval)) ? 'fc-major' : 'fc-minor');
} else {
  classes = this.getDayClasses(date);
  classes.push('fc-day');

更换

classes = [];

这个：

classes = this.getDayClasses(date);

相关内容

最新更新

热门标签：