Time Indicator Line

[jerome76]

I'm not sure if anyone has posted about this feature. But I feel like it should be included. I was able to create a time-indicator as seen on the gmail calendar. It is pretty basic but it gets the job done. Maybe in future versions this can be implemented out of the box?

Here is the code:

calendar/template/DateBody.js -- add the following line before the '<table ...>' in the superclass call:

Code: Select all

'<hr id="' + this.id.substring(0, this.id.length-3) + '-hd-time-indicator" class="time-indicator" style="top:0px;visibility: hidden;"></hr>',


So it should look something like this:

Code: Select all

calendar.template.DayBody.superclass.constructor.call(this,
            '<hr id="' + this.id.substring(0, this.id.length-3) + '-hd-time-indicator" class="time-indicator" style="top:0px;visibility: hidden;"></hr>',
            '<table class="ext-cal-bg-tbl" cellspacing="0" cellpadding="0" style="height:{dayHeight}px;">',


next,
calendar/view/Month.js -- add the following code into the initClock function's 'run' function:

Code: Select all

var formattedTime = Ext.Date.format(t, Calendar.Date.use24HourTime ? 'G:i' : 'g:ia'),
                        indicator = Ext.get(this.id + '-time-indicator');

                    if(el !== null && indicator !== null){
                        // move indicator based on time
                        var hourInterval = 42,
                            minuteInterval = hourInterval / 59,
                            fullTime = formattedTime,
                            length = fullTime.length,
                            am = fullTime.substring(length-2, length) === "am",
                            h_px = am ? 0 : hourInterval * 12,
                            m_px = 0;

                        var hour = parseInt(fullTime.substring(0, length == 7 ? 2 : 1), 10),
                            min  = parseInt(fullTime.substring(length == 7 ? 3 : 2, length == 7 ? 5 : 4), 10);

                        h_px = h_px + ((!am && hour == 12) ? 0 : (hourInterval * hour)),
                            m_px = m_px + (minuteInterval * min);

                        if(indicator.dom.style.visibility === 'hidden'){
                            indicator.show();
                        }
                        indicator.setTop(h_px + m_px);
                    }
                    else if(indicator !== null){
                        indicator.hide();
                    }


So it should look like this:

Code: Select all

//private
    initClock : function(){
        if(Ext.fly(me.itemId + '-clock') !== null){
            me.prevClockDay = new Date().getDay();
            if(me.clockTask){
                Ext.util.TaskManager.stop(me.clockTask);
            }
            me.clockTask = Ext.util.TaskManager.start({
                //gets called every second
                run: function(){
                    var el = Ext.fly(this.id + '-clock'),
                        t = new Date();

                    var formattedTime = Ext.Date.format(t, Calendar.Date.use24HourTime ? 'G:i' : 'g:ia'),
                        indicator = Ext.get(this.id + '-time-indicator');

                    if(el !== null && indicator !== null){
                        // move indicator based on time
                        var hourInterval = 42,
                            minuteInterval = hourInterval / 59,
                            fullTime = formattedTime,
                            length = fullTime.length,
                            am = fullTime.substring(length-2, length) === "am",
                            h_px = am ? 0 : hourInterval * 12,
                            m_px = 0;

                        var hour = parseInt(fullTime.substring(0, length == 7 ? 2 : 1), 10),
                            min  = parseInt(fullTime.substring(length == 7 ? 3 : 2, length == 7 ? 5 : 4), 10);

                        h_px = h_px + ((!am && hour == 12) ? 0 : (hourInterval * hour)),
                            m_px = m_px + (minuteInterval * min);

                        if(indicator.dom.style.visibility === 'hidden'){
                            indicator.show();
                        }
                        indicator.setTop(h_px + m_px);
                    }
                    else if(indicator !== null){
                        indicator.hide();
                    }

                    if(t.getDay() == me.prevClockDay){
                        if(el){
                            ...


Here is the css for the time-indcator:

Code: Select all

.time-indicator {
    position: relative;
    border: none;
    border-top: 1px solid red;
    border-bottom: 1px solid red;
    width: 100%;
    margin: 0;
    padding: 0;
    z-index: 1;
}

It only shows for the current day in the Day View, and the full week for the Week/Multi-Day Views.
(I changed the css above so the line looks a bit thicker than in the image)

Feel free to customize it If you can't get it working make sure it is referencing the elements correctly using the correct id. I use me.itemId (with var me = this;) instead of this.id in my code, but I changed it here so it would theoretically fit into the package that comes with the download.

[brian.moeskau]

Thanks for posting this! I played around with something similar a while back and plan on including this feature in an upcoming release. I'll take a look at this when I get around to that.

[jerome76]

The only thing I noticed is that since it has a higher z-index than the events, the line shows over the text. I think that would be up to the user, though. I don't mind it, but others may want the line to go behind the events.

[jerome76]

The only thing I noticed is that since it has a higher z-index than the events, the line shows over the text. I think that would be up to the user, though. I don't mind it, but others may want the line to go behind the events.

If one wants, the event css class can be changed to have a z-index higher than the z-index in the time-indicator class:

Code: Select all

.ext-cal-day-col .ext-cal-evr,
.ext-cal-day-col .ext-cal-evi {
    white-space: normal;
    border-right: 1px solid #fff;
    z-index: 2;  //time-indicator has z-index: 1;
}

[mirabeltech]

Thanks for you code , Time line is appearing fine for day view and week view, But in the "Week view" line is Occupied entire week instead of Current Day Cell as like google Calendar, Can you please help me out ,where i went wrong.
Thanks in Advance.