jquery – fullcalendar当前时间行在星期视图和日视图

据了解,根据这个问题,在谷歌代码 http://code.google.com/p/fullcalendar/issues/detail?id=143上有一个soloution浮动,但我似乎找不到它。

我想知道有没有人知道如何在日历上显示red solid line on the current time

解决方法

function setTimeline(view) {
    var parentDiv = jQuery(".fc-agenda-slots:visible").parent();
    var timeline = parentDiv.children(".timeline");
    if (timeline.length == 0) { //if timeline isn't there,add it
        timeline = jQuery("<hr>").addClass("timeline");
        parentDiv.prepend(timeline);
    }

    var curTime = new Date();

    var curCalView = jQuery("#calendar").fullCalendar('getView');
    if (curCalView.visStart < curTime && curCalView.visEnd > curTime) {
        timeline.show();
    } else {
        timeline.hide();
        return;
    }

    var curSeconds = (curTime.getHours() * 60 * 60) + (curTime.getMinutes() * 60) + curTime.getSeconds();
    var percentOfDay = curSeconds / 86400; //24 * 60 * 60 = 86400,# of seconds in a day
    var topLoc = Math.floor(parentDiv.height() * percentOfDay);

    timeline.css("top",topLoc + "px");

    if (curCalView.name == "agendaWeek") { //week view,don't want the timeline to go the whole way across
        var dayCol = jQuery(".fc-today:visible");
        var left = dayCol.position().left + 1;
        var width = dayCol.width()-2;
        timeline.css({
            left: left + "px",width: width + "px"
        });
    }

}

然后在设置中:

viewDisplay: function(view) {
        try {
            setTimeline();
        } catch(err) {}
    },

并在css中:

.timeline {
    position: absolute;
    left: 59px;
    border: none;
    border-top: 1px solid red;
    width: 100%;
    margin: 0;
    padding: 0;
    z-index: 999;
}

只有在周末观看,因为这是我使用的。

祝你好运。

编辑:

为了让白天更新时间轴,您可以在viewDisplay中尝试这样的事情:

viewDisplay: function(view) {
            if(first){
                first = false;
            }else {
                window.clearInterval(timelineInterval);
            }
            timelineInterval = window.setInterval(setTimeline,300000);
            try {
                setTimeline();
            } catch(err) {}
        },

您将需要在标签的顶部设置first = true。这将每300秒移动时间轴= 5分钟。你可以降低它,如果你需要它更顺利..

相关文章

jQuery插件的种类 1、封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进...
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。 入门 编写一个jQuery插件开始于给...
最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js。 兼容性如图: ht...
一、什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异...
AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一...