Current time line/indicator

[arshaw]

Originally reported on Google Code with ID 2564

Hi all,

I am trying to get knowledfe on the new Resource / Timeline View and I'd like to add
a current time line or indicator. I mean, a vertical line.

I know this was an issue for the agendaWeek but I can't get it to work on this new
feature.

Could anybody helping me a little bit?

Best regards

Reported by pereiraschumy on 2015-08-18 11:42:41

[pereiren]

Hi, I am the guy who opened this issue on googlecode. Sorry for that last grammar mistake, english is not my native language.

So, this is how I did my current time line/indicator.

It looks like this:

This is my css. It's pretty similar to another solution to this issue on AgendaWeek.

    .timeline {
        position: absolute;    
        border: 2px dotted red;
        width: 1px;
        margin: 0;
        padding: 0;
        z-index: 9;
        height: auto;
    }

And here I developed my function which draws a vertical line on ResourceView

   function setTimelineRec(view) {
//I get the div where the line will be shown.
        var parentDivAux = jQuery(".fc-time-area.fc-widget-content").children().children().children().children();
        var parentDiv = jQuery();
        for (var i = 0; i < parentDivAux.length; i++) {
//I need only (i think so) the fc-bg, cause fc-content is defined on multiple ocassions and line would be painted multiple times.
            if (parentDivAux[i].className === "fc-bg") {
                parentDiv.push(parentDivAux[i]);
            }
        }

        var timeline = parentDiv.children(".timeline").children();
        if (timeline.length == 0) { //if timeline isn't there, add it
          timeline = jQuery("<hr>").addClass("timeline");

           //my calendar starts at 9 am and finishes at 9 pm, so I get the total amount of seconds from midnight to 9 am and from 9 am to 9 pm
            var secondsHourMin = 9 * 3600;

            var totalSeconds = 12 * 3600 ;

//I get the width of the div where the line will be painted
            var widthAux = jQuery(".fc-time-area.fc-widget-content").children().children().children();
            var width = widthAux.width();

           //we obtain the current time/date to know where we should draw the vertical line
            var curTime = new Date();
            var curSeconds = (curTime.getHours() * 60 * 60) + (curTime.getMinutes() * 60) + curTime.getSeconds() - secondsHourMin;
            var percentOfDay = curSeconds / totalSeconds; //totalSeconds = 12 hours

//I calculate the margin with a known width and the actual percentOfDay
            var margin = (percentOfDay * width);

//margin is applied and finally I prepend the timeline.
            timeline.css({
                left: margin + "px",
                height: "100%",
                width: 1 + "px"
            });

            parentDiv.prepend(timeline);
        }

    }

Then I have two functions, one is launched when the windows is resized and another one to update the line every 5 seconds. I remove the hr, and inmediately I call the previous function. It does not flicker at all, so I find it enough.

    setInterval(function () {
        $('.timeline').remove();
        setTimelineRec();
    }, 5000);

    $(window).on('resize', function () {
        $('.timeline').remove();
        setTimelineRec();
    });

I know this is not the best way to do it, but I am almost a noob with JS and JQuery. Hope this helps anyone in future.

[sparh]

Another workaround
It doesn'refresh every X seconds but on every page load/day change, calendar reload.

function highlight_hour() {
$(".timeline_line").removeClass("ui-state-highlight");
var coeff = 1000 * 60 * 30; // 30 should be equal to fullcalendar option slotDuration min 5 max 60
var date = new Date(); //or use any other date
var tzoffset = date.getTimezoneOffset() * 60000;
var rounded = new Date(Math.floor((date.getTime()-tzoffset) / coeff) * coeff);
var la_class_highlight = rounded.toISOString().slice(0,-5);
$('[data-date="'+la_class_highlight+'"]').addClass("ui-state-highlight timeline_line");
}

and in eventAfterAllRender simply call it highlight_hour();

Add this in your CSS if you are not using jquery ui
.ui-state-highlight {
background:#F2F5A9;
}

Working jsbin
http://jsbin.com/hegobeyaze/edit?css,js,output

[arshaw]

this has been release in 1.2.0:
http://fullcalendar.io/docs/current_date/nowIndicator/

[mattdanna]

So awesome! 👍 👍