Originally reported on Google Code with ID 143
- would it be possible to have a "current time" indicator (red line and red
arrow) in the agenda views?
see file attached
Reported by [email protected] on 2009-10-23 06:57:58
_Imported with 57 stars.
man, you can do it with the class atribute and css... check the docs
Reported by Otello2040 on 2009-11-04 12:01:18
hi stefan and otello,
this is currently not possible (there are no elements you can style yet). i think
this is a good idea, i will have it in an upcoming release.
thanks,
adam
Reported by adamrshaw on 2009-11-04 17:36:10
AcceptedIssue 1082 has been merged into this issue.
Reported by adamrshaw on 2011-02-14 02:10:10
please look at the closed issue 1082 for [email protected]'s beginnings of a solution
Reported by adamrshaw on 2011-02-14 02:10:45
Issue 1244 has been merged into this issue.
Reported by althaus.it on 2011-05-30 14:25:18
I got this working with some fairly simple javascript/css
In the calendar initialization:
viewDisplay: function(view) {
...
window.clearInterval(timelineInterval);
timelineInterval = window.setInterval(setTimeline, 10000);
try {
setTimeline();
} catch(err) { }
}
below:
function setTimeline() {
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 curTime = new Date();
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");
var left = dayCol.position().left + 1;
var width = dayCol.width();
timeline.css({
left: left + "px",
width: width + "px"
});
}
}
In the CSS:
.timeline {
position: absolute;
left: 59px;
border: none;
border-top: 1px solid red;
width: 100%;
margin: 0;
padding: 0;
z-index: 999;
}
Reported by [email protected] on 2011-08-08 17:13:33
Thanks works great. I had to add a check if dayCol.position().left is greater than 0.
Otherwise the timeline was misplaced when switching between browser tabs. Everything
else works fine.
Reported by [email protected] on 2011-08-16 05:38:24
Issue 1365 has been merged into this issue.
Reported by althaus.it on 2011-09-06 09:38:40
please, help me, what do you mean with 'calendar initialization' = which file is that?
Reported by karel.rosseel on 2011-09-16 23:13:51
whatever file you're using fullcalendar with. Like when you call $(...).fullCalendar,
that'd be one of the arguments.
Reported by [email protected] on 2011-09-19 19:12:44
I just added the code from [email protected] to the fullcalendar sources. The time
indicator can be enabled using the option 'currentTimeIndicator'.
Diff to current git sources is attached.
Reported by roundcube on 2011-10-18 21:18:58
Where is the file to download this
Reported by russell.william.harrower on 2012-01-11 02:20:23
This does not work correct when using:
minTime: 7,
maxTime: 24,
Can anyone fix that?
Reported by mvugteveen on 2012-01-17 13:00:46
The code posted by [email protected] worked for me. Except one error: 'timelineInterval'
is undefined. I had to edit code like this:
if(typeof(timelineInterval) != "undefined")
window.clearInterval(timelineInterval);
Overall code worked awesome.
Thanks
Reported by adi.shoukat on 2012-02-19 00:43:39
I am using the code posted by [email protected] in Comment#7
The code is good. However I found two issues:
-> In week view when you move to any week that is not the current week. You will see
an error in browser's error console: 'Cannot read property left of null'
-> If you load the week view at 11:59PM the time line will not jump to next day after
12:00AM. This was basically due to a bug in FullCalendar. Fullcalendar doesn't change
the 'today' day automatically after 12:00AM.
I fixed both issues by alerting the setTimeline function like this:
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"
});
}
}
}
Reported by adi.shoukat on 2012-03-20 13:38:00
Thanks for those fixes. In my own use, my client asked for it to go to whole way across
even in week view, so I never noticed that problem with left being null. In response
to #14, the two lines that would be changed would be:
var curSeconds = (curTime.getHours() * 60 * 60) + (curTime.getMinutes() * 60) + curTime.getSeconds();
var percentOfDay = curSeconds / 86400; //24 * 60 * 60 = 86400, # of seconds in a day
curSeconds would subtract off minTime*60*60 (or however you would access that from
the fullcalendar settings), and percentOfDay would be dividing by (maxTime-minTime)*60*60
instead of 86400.
Reported by [email protected] on 2012-03-20 19:10:55
this code works with the latest version ?
Reported by akram01ad on 2012-06-14 09:29:20
Hi. i have read this 20 times, but i can't get it to work with the current time, can
someone help me !?
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>
Reported by hundentino on 2012-10-15 14:42:30
can you help me with this i need the time slot to be displayed in current time
Reported by indersi1 on 2012-11-27 07:41:54
This does not appear to work in the current version. Either that or I'm doing something
wrong. I've got the red timeline showing up in the week and day views but it just sits
up at the very top at 12 AM and doesn't follow the current time. I'm gonna fiddle around
with it and see if I can figure it out but any help would be greatly appreciated. My
code looks like #21 more or less. If I get it working I'll post the solution.
Reported by donohuetechnology on 2013-01-25 15:02:06
This does work in the current version. I am currently using it. There are two keys you
have to look for... 1. In the function about 14 lines down the calendar method get
view is being called. You need to make sure the "calendar" variable is the same as
your own. Number 2 If you are getting an error undefined "timelineInterval" it is
because you are not initiating the variable prior to calling it. Add timelineInterval
= 0 at the beginning of viewDisplay and that should fix your problem
Reported by weightlossexp on 2013-01-28 07:35:34
var calendar = $("#calendar").fullCalendar({
viewDisplay: function(view) {
var timelineInterval = 0;
window.clearInterval(timelineInterval);
timelineInterval = window.setInterval(setTimeline, 10000);
try {
setTimeline();
} catch(err) { }
}
///////////////
function as shown above
///////////////////
});
Reported by weightlossexp on 2013-01-28 16:53:50
Perfect! Thank you very much. My problem was the method. I just replaced calendar with
$("$calendar") and it works beautifully now. It's always the small things. :)
Reported by donohuetechnology on 2013-01-28 18:58:06
for [email protected]
solution is defined below by [email protected]
Please create variable for timelineInterval in the viewDisplay event.
var timelineInterval = 0 ;
else do like this way
if (typeof (timelineInterval) != "undefined")
window.clearInterval(timelineInterval);
Reported by sanjay.bhavsar2586 on 2013-05-16 04:36:36
Re: #17 [email protected]
Adi, your calculation is wrong if min and max hours are specified.
Here is more flexible way:
var startSeconds = curCalView.getMinMinute()*60;
var endSeconds = curCalView.getMaxMinute()*60;
var curSeconds = (curTime.getHours() * 60 * 60) + (curTime.getMinutes() * 60) + curTime.getSeconds();
var percentOfDay = (curSeconds-startSeconds) / (endSeconds-startSeconds);
var topLoc = Math.floor(parentDiv.height() * percentOfDay);
Reported by [email protected] on 2013-05-16 06:27:26
Reported by adamrshaw on 2013-08-14 01:59:57
Issue 1509 has been merged into this issue.
Reported by adamrshaw on 2013-08-15 04:47:30
Issue 1684 has been merged into this issue.
Reported by adamrshaw on 2013-08-18 19:15:14
Here is a pull request with an implementation of this, via @jgauby:
https://github.com/arshaw/fullcalendar/pull/150
Reported by adamrshaw on 2014-06-05 20:18:54
Another pull request, via @vfonic:
https://github.com/arshaw/fullcalendar/pull/104
...which is a based off of this pull request by @roundcube:
https://github.com/arshaw/fullcalendar/pull/48
(which implements a lot of other things as well)
I have not tested either of this nor investigated compatibility with v2, but they might
be worth checking out nonetheless.
Reported by adamrshaw on 2014-06-05 22:22:31
Another pull request. @hasanozgan, in his fork, has implemented this, called "time line":
https://github.com/arshaw/fullcalendar/pull/60
It's based on a pretty old version of the code, and I have not extensively tested it,
but might be worth checking out.
Reported by adamrshaw on 2014-06-06 15:16:06
Issue 2043 has been merged into this issue.
Reported by adamrshaw on 2014-06-07 21:06:40
after change to v.2
the function was change
viewRender: function (view, element) {
setTimeline(view);
},
function setTimeline(calView) {
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();
if (calView.start < curTime && calView.end > 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 (calView.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"
});
}
}
Reported by BermanEyal on 2014-06-18 14:44:43
#37 - Great ... it works on v.2.0, but it doesn't on v.2.1 Beta1
Reported by leonardosstav on 2014-07-28 20:44:42
I have an alternative approach to adding this feature. Basically, this uses the existing
event system to create a 1px height event, and then update it periodically as the time
changes. The event is removed whenever the user changes to a non-agenda view. The one
drawback that I can see in using this method is that it still follows the event overlap
rules, which may or may not bother you.
This code uses the doTimeout jQuery Plugin (http://benalman.com/code/projects/jquery-dotimeout/docs/files/jquery-ba-dotimeout-js.html),
but you can of course replace it with the standard setInterval() and clearTimeout()
if you wish.
However, I'd still like to see fullcalendar support this more natively. The biggest
hurdle to making a current time indicator seems to be trying to find the right coordinates
to create it at. And I think having a function like GetPosFromTime(moment) would be
an excellent way to make this (and any number of calendar annotations) more easily
possible.
viewRender: function(view, element) {
if (view.name == "agendaWeek" || view.name == "agendaDay") {
var setCurrentTime = function() {
view.calendar.removeEvents("currenttime");
view.calendar.renderEvent({id: "currenttime", title: "Current Time", start: moment(),
end: moment().add('minutes', 1), className: "current-time-event", editable: false},
true);
}
setCurrentTime();
$.doTimeout("currenttime", 10000, function() {
setCurrentTime();
return true;
});
} else {
$.doTimeout("currenttime");
view.calendar.removeEvents("currenttime");
}
}
.current-time-event {
background-color: transparent;
border-top: 1px solid #FF0000;
border-bottom: none;
border-left: none;
border-right:none;
}
Reported by slserpent on 2014-08-13 23:19:59
Well, if it acts like an event it centainly follows the overlap rule.
I'm detecting overlapping events, and with this solution I cannot schedule an event
that overlaps the current time.
Is there a solution to this ?
Reported by pedrocoutinho74 on 2014-09-14 18:48:42
Hey every one, i am following this link, and implemented it. Every thing is working
fine. But i want to add one more feature. let me give the scenario. I have site developed
in spanish and i am opening this site in different country. How do i get the timing
according to my area in calender. new Date is taking system's date. right?
Reported by nandlalajisingh on 2014-10-07 10:33:57
Why not add this feature in the box?
Reported by lkdnvc on 2014-11-04 16:55:24
here is my working setTimeline function from post #7
it works from fullcalent v2.1.1 to current (v2.2.3) also it only works for aganda view
function setTimeline(){
if(jQuery(".timeline").length == 0){
jQuery(".fc-time-grid-container").prepend("<div style='width:100%;overflow: visible;'><hr
class='timeline'/></div>")
}
var timeline = jQuery(".timeline");
if(jQuery(".fc-today").length <= 0){
timeline.hide()
return;
}
else{
timeline.show()
}
var now = moment();
var day = parseInt(now.format("e"))
var width = jQuery(".fc-today").outerWidth()
var height = jQuery(".fc-today").height()
var left = (day*width) + jQuery(".fc-axis").outerWidth()-1
var top = ( (now.hours()*3600)+(now.minutes()*60)+now.seconds() )/86400;
top = height*top;
timeline
.css('width',width+"px")
.css('left',left+"px")
.css('top',top+"px")
}
Reported by ww2airforce on 2014-11-28 09:31:58
Is there any progress on this issue?
Reported by [email protected] on 2014-12-17 13:28:49
Implementation of this functionality in version 2.2.3 of FullCalendar.
This requires that the slotDuration functionality is available (unsure if this is a
separate plugin).
if (currentView.currentTimeInterval) { clearInterval(currentView.currentTimeInterval);
}
if (currentView.el.find(".fc-time-grid-container").length > 0 && currentView.el.find(".fc-today").length
> 0 && currentView.el.find(".fc-axis").length > 0)
{
if (!currentView.currentTimeElement)
{
currentView.el.find(".fc-time-grid-container").prepend("<hr class=\"timeline\" style=\"position:
absolute; border: 0px; font-size: 0px; height: 3px; margin-top: -1px; z-index: 2; background:
rgba(255, 0, 0, 0.25); padding: 0px;\" />");
currentView.currentTimeElement = currentView.el.find(".timeline");
}
function setTimeline()
{
var now = moment();
var duration = currentView.timeGrid.slotDuration;
var day = parseInt(now.format("e"));
var width = currentView.el.find(".fc-today").outerWidth();
var height = (currentView.el.find(".fc-today").outerHeight() / 2) + 1;
var left = (day * width) + currentView.el.find(".fc-axis").outerWidth();
var perc = (((now.hours() * 3600) + (now.minutes() * 60) + now.seconds()) / (duration
/ 1000)) / 0.24;
var top = ((height * 24) / 100) * perc;
currentView.currentTimeElement.css({"width": width + "px", "left": left + "px", "top":
top + "px"});
}
// Auto-update the position of the time element and set its initial position.
currentView.currentTimeInterval = setInterval(setTimeline, (1000 * 60));
setTimeline();
}
Reported by [email protected] on 2014-12-22 15:31:30
I've submitted a pull request to include the above code in the next version of FullCalendar.
It probably doesn't conform to the proper guidelines for introducing new features but
IMO it's a good start and the bulk of the work should be completed.
https://github.com/arshaw/fullcalendar/pull/207
Reported by [email protected] on 2014-12-23 06:52:08
setTimeline - minTime, maxTime
var startSeconds = curCalView.getMinTime()/1000;
var endSeconds = curCalView.getMaxTime()/1000;
var curSeconds = (curTime.getHours() * 60 * 60) + (curTime.getMinutes()
* 60) + curTime.getSeconds();
var percentOfDay = (curSeconds-startSeconds) / (endSeconds-startSeconds);
var topLoc = Math.floor(parentDiv.height() * percentOfDay);
Reported by mathi.nathan on 2015-06-24 05:02:28
Is this functionality in a released version yet? I see comments indicating that the 2.2.3 has it but this issue has not been closed and so was unsure.
@vakeeel this has not yet been implemented
@arshaw is there an estimate on when this will be available. I will need to mark the code I am writing now to be removed. Thank you!!
actively working on it and should be out before the new year or shortly after
Awesome, thanks a lot!
release in v2.6.0
http://fullcalendar.io/docs/current_date/nowIndicator/
Thank you so much
Most helpful comment
release in v2.6.0
http://fullcalendar.io/docs/current_date/nowIndicator/