fullcalendar当前时间线在周视图和日视图 [英] fullcalendar current time line on week view and day view

问题描述

我了解，根据此问题，Google代码 http://code.google。 com / p / fullcalendar / issues / detail？id = 143 ，有一个soloution浮动，但我似乎找不到它。

I understand that according to this issue ticket on google code http://code.google.com/p/fullcalendar/issues/detail?id=143 that there is a soloution floating around, however I cant seem to find it.

想知道是否有人知道如何在日历上显示当前时间的红色实线

I am wondering if anyone knows how to show a red solid line on the current time on the calendar

推荐答案

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

}

然后在setup： / p>

And then in the setup:

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

：

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

祝你好运。

编辑：

要在白天更新时间轴，您可以在viewDisplay中尝试这样：

To get the timeline to update during the day you could try something like this in the 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分钟移动时间轴。你可以降低它，如果你需要它更流畅。

You will need to set first=true in the top of the tag. This will move the timeline every 300 second = 5 minutes. You can lower it if you need it more smooth..

这篇关于fullcalendar当前时间线在周视图和日视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！