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>
siraero
Member
419 Points
604 Posts
jQuery plugin Fullcalendar Current Time show
Oct 16, 2012 03:15 PM|LINK
Hi.
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>qm-b
Member
2 Points
1 Post
Re: jQuery plugin Fullcalendar Current Time show
Nov 11, 2012 04:44 AM|LINK
Hi.. Please try setting the vartiable for timelineInterval before clearing it.. Otherwise you'd get an js error for unknown variable.
viewDisplay: function(view) { var timelineInterval; window.clearInterval(timelineInterval); timelineInterval = window.setInterval(setTimeline, 10000); try { setTimeline(); } catch(err) { } },