jquery - jQuery fullcalendar在当前时间画一条线

我想在slotMinutes为15时在jQuery完整日历中显示当前时间





以下是我的代码供审查

$.createFullCalendarWithCurrentTime = function (selectCallback, eventsCallback, mouseOverCallback, options, eventRenderCallback, curTime) {

    var mintime = 7;
    var maxtime = 22;
    var slotsTable = undefined;
    var calendar = undefined;

    calendar = $('#calendar').fullCalendar({
        unselectAuto: false,
        header: { left: 'prev', center: 'title', right: 'next' },
        titleFormat: { week: "MMMM dd, yyyy{ - MMMM dd, yyyy}" }, // Sep 7 - 13 2009 ,
        defaultView: "agendaWeek",
        columnFormat: { week: 'dddd' },
        eventBackgroundColor: options && options["eventBackgroundColor"] ? options["eventBackgroundColor"] : "#FFEB00",
        eventBorderColor: "#FFEB00",
        eventTextColor: options && options["eventTextColor"] ? options["eventTextColor"] : "#333333",
        axisFormat: 'h(:mm) tt',
        aspectRatio: 0.1,
        buttonText: { prev: '', next: '' },
        selectable: (selectCallback != null && $.isFunction(selectCallback) ? true : false),
        selectHelper: true,
        editable: false,
        allDaySlot: false,
        slotMinutes: 15,
        minTime: 7,
        maxTime: 22,
        firstDay: 1,
        eventMouseover: mouseOverCallback,
        viewDisplay: function () {
            // Create slots table only if not created

            if (!slotsTable) {
                // Set time
                for (var i = 0; i < maxtime - mintime; i++) {

                    $(".fc-slot" + (i * 2 + (i * 2 + 2)) + ".fc-minor>th").html(((mintime + i) < 12 ? (mintime + i) : ((mintime + i) == 12) ? 12 : (mintime + i) % 12) + ":30 " + (mintime + i < 12 ? "am" : "pm"));
                    $(".fc-slot" + (i * 2 + (i * 2 + 2)) + ".fc-minor>th").addClass("innerHours");

                }
                // Set styles
                slotsTable = $(".fc-agenda-slots").clone();
                slotsTable.addClass("cloned");
                slotsTable
                    .css("position", "absolute")
                    .css("top", "-12px")
                    .css("z-index", "-100");
                $(".fc-agenda-slots th").css("visibility", "hidden");
                slotsTable.find("td").css("visibility", "hidden");

                // Set minimum and maximum values
                $("#minTime").html(mintime + " am");
                $("#maxTime").html(maxtime % 12 + " pm");

            }

            $(".fc-agenda-slots").parent().append(slotsTable);
            $(".fc-slot0>th").html("");

            var offset = slotsTable.find(".fc-slot0>th").offset();
            $(".septimo").css("top", offset.top);
            $(".septimo").css("left", offset.left);
            $(".septimo").css("width", slotsTable.find(".fc-slot0>th").width());

            offset = slotsTable.find("tr:last-child>th").offset();
            $(".veintidos").css("top", offset.top + slotsTable.find("tr:last-child>th").height());
            $(".veintidos").css("left", offset.left);
            $(".veintidos").css("width", slotsTable.find("tr:last-child>th").width());
            try {
                setTimeline();
            } catch (err) { }
        },
        select: selectCallback,
        events: eventsCallback,
        eventRender: eventRenderCallback
    });
    return 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 hgt = parentDiv.height();
    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"
    });
}

};

最佳答案

可能已经有关于SO的答案（但我找不到它...），因为我的jsfiddle区域中有此代码段和演示。

您可以使用自定义函数在viewRender事件中触发；虚线CSS为添加的行设置样式。


  呈现新的日期范围或视图类型时触发
  开关。


码：

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("#mycalendar").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"
        });
    }

}

$('#mycalendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title'
    },
    defaultView: 'agendaDay',
    editable: true,
    events: [{
        title: 'event1',
        start: '2014-01-07'
    }, {
        title: 'event2',
        start: '2014-01-10',
        end: '2013-05-15'
    }, {
        title: 'event3',
        start: '2014-01-13 12:30:00',
        allDay: false // will make the time show
    }],
    viewRender: function (view) {
        try {
            setTimeline();
        } catch (err) {}
    },
});

CSS：

.timeline {
    position: absolute;
    border-top: 2px dashed red;
    width: 100%;
    margin: 0;
    padding: 0;
    z-index: 999;
}

演示：http://jsfiddle.net/IrvinDominin/M67kv/