私はこのスレッドhttp://code.google.com/p/fullcalendar/issues/detail?id=143を読んで質問を追加しましたが、少し古いので、ここで質問します。
スレッドからのフィードバックに従いましたが、フルカレンダーの現在の時刻を表示するスクリプトを取得できません。他のすべてが正常に機能しており、イベントが表示されていますが、現在の時刻を表示できません。週/日ビューの時間、これについていくつかのノウハウを持っている誰かがここにいますか！？
私のコードは次のとおりです。
<!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]{ '—'[ 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: " ◄ ", next: " ► ",
prevYear: " << ", nextYear: " >> ",
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>