Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Feature Request - Current time indicator #57

jfriedlaender opened this Issue Apr 9, 2011 · 9 comments


None yet
3 participants

It would be great if there was a way to have a indicator of the current time. This would be indicated with a thin line the spans across the calendar at the current time (ie. a line going across 3:15pm).

I had a look at the code, and tried to leverage the scroll to hour function, but I had no luck.

You can add it easily. Add a private variable at the start:

$.widget('ui.weekCalendar', (function() {
  var _currentAjaxCall;
  var _timeoutHour;
 return {

Now add the following in the _loadCalEvents method:

else if (options.data) {
            self._renderEvents(options.data, $weekDayColumns);

      var d = new Date();
      var top = d.getHours()*20*4+d.getMinutes()*20/15-1;
      var width = $('.wc-scrollable-grid .wc-today').width()+3;
      $('.wc-scrollable-grid .wc-today').append('<div class="hourLine" style="height: 0pt; border-top: 2px solid rgb(255,127,110); overflow: hidden; position: absolute; top: '+top+'px; width:'+width+'px;"></div>');
      _timeoutHour = setInterval(function(){
          var d = new Date();
          var top = d.getHours()*20*4+d.getMinutes()*20/15-1;
      }, 60*1000);


K-Phoen commented Apr 28, 2012

I'm working on a generic solution for this feature. It will be available soon.

@K-Phoen K-Phoen closed this in 0e06956 Apr 28, 2012

Thanks @K-Phoen I will try it out.

The line is not showing at the correct time for me. I am not on the latest version of this control, I am not sure yet if that is affecting it, I just applied your changes manually. I will investigate more and let you know.

UPDATE: I tested, still same problem when I take the newer version. I will see if I can work out the problem.

I think I found the bug, you aren't checking what the start hour of the calendar is, so if it's not 12am, then you are off by that many hours.

If you change one of your lines to this...

var nbHours = (d.getHours() + d.getMinutes() / 60) - options.businessHours.start;

Sorry I don't know how to pull your change and change it myself.

Also just for reference, I needed to change the width of the line to make sure it stayed only in todays day. On 3-day view it was going right across the page. This did the trick for me but there might be a nicer way.

    $('.wc-scrollable-grid .wc-today', this.element).append(
      $('<div>', {
        'class': 'wc-hourline',
        style: 'top: ' + positionTop + 'px; width: ' + ($('.wc-scrollable-grid .wc-today', this.element).width() + 3) + 'px;'

K-Phoen commented Apr 29, 2012


Thanks for your feedback. I fixed the bugs you encountered and even another one! Could you test it again?

Where is the fix? I don't see it.


K-Phoen commented Apr 30, 2012

The fix is committed in master: 8e8b00c

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment