Question

我已阅读并向此帖http://code.google.com/p/fullcalendar/issues/detail?id=143添加了一个问题，但它有点旧，所以我在这里问。

我已经关注了线程的反馈，但我无法让我的脚本显示Fullcalendar的当前时间，所有其他的工作正常，它显示事件等等，但我无法得到它以周/日视图显示当前时间，这里是否有人对此有一些了解！？

我的代码是：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="css/fullcalendar.css" rel="stylesheet" />
<link href="css/FCstyle.css" rel="stylesheet" />
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery-ui-1.9.0.js"></script>
<script src="js/fullcalendar.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();

        $('#calendar').fullCalendar({
            theme: true,
            header: { left: "today prev,next", center: "title", right: "month,agendaWeek,agendaDay" }, weekends: true, allDayDefault: true, ignoreTimezone: true, lazyFetching: true,
            startParam: "start", endParam: "end", titleFormat: { month: "MMMM yyyy", week: "MMM d[ yyyy]{ '&#8212;'[ MMM] d yyyy}", day: "dddd, MMM d, yyyy" },
            columnFormat: { month: "ddd", week: "ddd dd-MM", day: "dddd dd-MM" },
            // To change display time HH:mm
            // timeFormat: { '': 'HH:mm' }, isRTL: false,
            // To change first display date as monday
            firstDay: 1,
            monthNames: ["Januar", "Februar", "Marts", "April", "Maj", "Juni", "Juli", "August", "September", "Oktober", "November", "December"],
            monthNamesShort: ["Jan", "Feb", "Mar", "Apr", "Maj", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"],
            dayNames: ["Søndag", "Mandag", "Tirsdag", "Onsdag", "Torsdag", "Fredag", "Lørdag"],
            dayNamesShort: ["Søn", "Man", "Tir", "Ons", "Tor", "Fre", "Lør"], buttonText: {
                prev: "&nbsp;&#9668;&nbsp;", next: "&nbsp;&#9658;&nbsp;",
                prevYear: "&nbsp;&lt;&lt;&nbsp;", nextYear: "&nbsp;&gt;&gt;&nbsp;",
                today: "i dag", month: "måned", week: "uge", day: "dag"
            },
            allDayDefualt: false,
            allDaySlot: true, allDayText: "hele dagen", firstHour: 7, slotMinutes: 30, defaultEventMinutes: 120,
            axisFormat: 'H:mm',
            timeFormat: 'HH:mm{-HH:mm}',
            //timeFormat: { agenda: 'H:mm{ - HH:mm}' }, dragOpacity: { agenda: 0.5 }, minTime: 0,
            maxTime: 24,
            editable: true,
            disableDragging: true,
            disableResizing: true,
            droppable: true,
            drop: function (date, allDay, jsEvent, ui) {
                console.log(jsEvent);
                console.log(ui);
            },

            // Is used for current time START
            viewDisplay: function(view) {
                window.clearInterval(timelineInterval);
                timelineInterval = window.setInterval(setTimeline, 10000);
                try {
                    setTimeline();
                } catch(err) { }
            },
            // Is used for current time END

            // add event name to title attribute on mouseover
            eventMouseover: function (event, jsEvent, view) {
                if (view.name == "month") {
                    $(jsEvent.target).attr('title', event.title);
                }
                //alert(event.id);
            },

            events: {
                url: 'fullcalendarjson.ashx',
                type: 'POST',
                error: function () {
                    alert('there was an error while fetching events!');
                }
            },

            selectable: true,
            selectHelper: true,
            select: function (start, end, allDay) {
                alert("Cell selected from " + $.fullCalendar.formatDate(start, 'dd-MM-yyyy') + " to " + $.fullCalendar.formatDate(end, 'dd-MM-yyyy'));
            },
            eventClick: function (calEvent, jsEvent, view) {
                if (!$(jsEvent.target).hasClass("icon")) {
                    alert("UserID:" + calEvent.id);
                }
            }

        });

        // Is used for Current Time START
        function setTimeline() {
            var curTime = new Date();
            if (curTime.getHours() == 0 && curTime.getMinutes() <= 5) // Because I am calling this function every 5 minutes
            {// the day has changed
                var todayElem = $(".fc-today");
                todayElem.removeClass("fc-today");
                todayElem.removeClass("fc-state-highlight");

                todayElem.next().addClass("fc-today");
                todayElem.next().addClass("fc-state-highlight");
            }

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

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

            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 = $(".fc-today:visible");
                if (dayCol.position() != null) {
                    var left = dayCol.position().left + 1;
                    var width = dayCol.width();
                    timeline.css({
                        left: left + "px",
                        width: width + "px"
                    });
                }
            }
        }
        // Is used for Current Time END

    });
</script>
<style type="text/css">
    /* Is used for Current Time CSS*/
    .timeline {
            position: absolute;
            left: 59px;
            border: none;
            border-top: 1px solid red;
            width: 100%;
            margin: 0;
            padding: 0;
            z-index: 999;
    }
</style>
</head>
<body>
<form id="form1" runat="server">
    <div id="calendar"></div>
</form>
</body>
</html>

Answer 1

两件事

像这样打电话给你的日历......

var calendar = $("#calendar").fullCalendar({});

和另一个......

在viewDisplay的开头，启动变量timelineInterval，如此

var timelineInterval = 0;

那应该解决你的问题。

jQuery插件Fullcalendar当前时间显示

1 个答案: