Time Indicator Line

Plugins and extensions for Extensible components, usage examples, links to applications using Extensible, etc.

Time Indicator Line

Postby jerome76 » Tue Jul 16, 2013 7:43 am

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.
Image (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.
Last edited by jerome76 on Fri Jul 19, 2013 6:51 am, edited 3 times in total.
Sencha @jerome76
jerome76
 
Posts: 3
Joined: Tue Jul 16, 2013 6:54 am

Re: Time Indicator Line

Postby brian.moeskau » Tue Jul 16, 2013 8:49 am

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.
Personal Blog: Extraneous / Twitter: @bmoeskau / Meetup: Austin Bleeding Edge Web
User avatar
brian.moeskau
Site Admin
Site Admin
 
Posts: 1344
Joined: Sat Sep 18, 2010 5:00 pm
Location: Austin, Texas

Re: Time Indicator Line

Postby jerome76 » Tue Jul 16, 2013 10:43 am

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.
Sencha @jerome76
jerome76
 
Posts: 3
Joined: Tue Jul 16, 2013 6:54 am

Re: Time Indicator Line

Postby jerome76 » Fri Jul 19, 2013 6:48 am

jerome76 wrote: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;
}
Sencha @jerome76
jerome76
 
Posts: 3
Joined: Tue Jul 16, 2013 6:54 am

Re: Time Indicator Line

Postby mirabeltech » Thu Oct 24, 2013 4:57 am

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.
mirabeltech
Premium Member
Premium Member
 
Posts: 41
Joined: Thu Jul 25, 2013 12:11 pm


Return to Plugins, Examples & Extras

Who is online

Users browsing this forum: No registered users and 2 guests