I have read and added a question to this thread http://code.google.com/p/fullcalendar/issues/detail?id=143 but its a bit old, so im asking here.
I have followed the feedback from the thread, but i can’t get my script to show the current Time for the Fullcalendar, all other things are working fine, its showing events and so on, but i can’t get it to show current Time in week/day view, is there someone here that have some knowhow about this !?
My code is:
<!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>
Two things
Call your calendar like this…
and the other…
At the beginning of viewDisplay initiate the variable timelineInterval like so
That should fix your problem.