| Issue 143: | Current time indicator in agenda views | |
| 57 people starred this issue and may be notified of changes. | Back to list |
- would it be possible to have a "current time" indicator (red line and red arrow) in the agenda views? see file attached
Nov 4, 2009
#1
Otello2...@gmail.com
Nov 4, 2009
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
Status:
Accepted
Feb 13, 2011
Issue 813 has been merged into this issue.
Feb 13, 2011
please look at the closed issue 813 for hiemstra...@gmail.com's beginnings of a solution
May 30, 2011
Issue 975 has been merged into this issue.
Aug 8, 2011
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;
}
Aug 15, 2011
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.
Sep 6, 2011
Issue 1098 has been merged into this issue.
Sep 16, 2011
please, help me, what do you mean with 'calendar initialization' = which file is that?
Sep 19, 2011
whatever file you're using fullcalendar with. Like when you call $(...).fullCalendar, that'd be one of the arguments.
Oct 18, 2011
I just added the code from jer...@zignage.com to the fullcalendar sources. The time indicator can be enabled using the option 'currentTimeIndicator'. Diff to current git sources is attached.
Jan 10, 2012
Where is the file to download this
Jan 17, 2012
This does not work correct when using: minTime: 7, maxTime: 24, Can anyone fix that?
Feb 18, 2012
The code posted by jer...@zignage.com 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
Mar 20, 2012
I am using the code posted by jer...@zignage.com 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"
});
}
}
}
Mar 20, 2012
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.
Jun 14, 2012
this code works with the latest version ?
Oct 15, 2012
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>
Nov 26, 2012
can you help me with this i need the time slot to be displayed in current time
Jan 25, 2013
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.
Jan 27, 2013
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
Jan 28, 2013
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
///////////////////
});
Jan 28, 2013
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. :)
May 15, 2013
for hundent...@gmail.com
solution is defined below by weightlo...@gmail.com
Please create variable for timelineInterval in the viewDisplay event.
var timelineInterval = 0 ;
else do like this way
if (typeof (timelineInterval) != "undefined")
window.clearInterval(timelineInterval);
May 15, 2013
Re: #17 adi.shou...@gmail.com 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);
Aug 13, 2013
(No comment was entered for this change.)
Summary:
Current time indicator in agenda views
(was: Current time indicator in agendaweek and agendaday view)
Labels: -Type-Defect -Priority-Medium Type-Feature
Aug 14, 2013
Issue 1242 has been merged into this issue.
Aug 18, 2013
Issue 1417 has been merged into this issue.
Jun 5, 2014
Here is a pull request with an implementation of this, via @jgauby: https://github.com/arshaw/fullcalendar/pull/150
Jun 5, 2014
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.
Jun 6, 2014
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.
Jun 7, 2014
Issue 2043 has been merged into this issue.
Jun 18, 2014
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"
});
}
}
Jul 28, 2014
#37 - Great ... it works on v.2.0, but it doesn't on v.2.1 Beta1
Aug 13, 2014
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; }
Sep 14, 2014
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 ?
Oct 7, 2014
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?
Nov 4, 2014
Why not add this feature in the box?
Nov 28, 2014
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")
}
Dec 17, 2014
Is there any progress on this issue?
Dec 22, 2014
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();
}
Dec 22, 2014
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
Aug 21, 2015
Discussion for this issue has moved to the following URL: https://github.com/fullcalendar/fullcalendar/issues/414 This is because Google Code is shutting down. Apologies if you are being pestered with these notifications. This is a one-time event. Happy coding, Adam
Status:
ExportedToGithub
Dec 9, 2015
Hi, How to all days (Ex. previous day and next day) draw the line in current time full calendar. Pls help me.
Jan 7, 2016
This feature has been implemented and released. Please see my comment on the new issue tracker: https://github.com/fullcalendar/fullcalendar/issues/414#issuecomment-169640780 Please do not comment on this old issue tracker. Thanks! |
|
| ► Sign in to add a comment |