Question

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

我看到'普通'fullcalendar附带此功能。但不知何故，调度程序没有。我检查了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'
}

它不再起作用了。具有实际小时的列不会突出显示。我能做些什么吗？

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

Fullcalendar日程安排/时间线今天没有突出显示？

1 个答案: