TimeLine

by Diya_Khan

HTML

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/html" id="slotTemplate">
    <div data-bind="foreach:$data" class="dvTimeLineContainer">
        <div class="dvTimeLineSlot">            
           <div class="dvEvents" >
               <div data-bind="ifnot : $data.events.length === 0">
                 <span class="event" data-bind="text: $data.events[0].eventName">
                 </span><br/>                 
               </div>
            </div>  
            <div  class="dvExpand" >
                <div data-bind="visible: $data.events.length > 1,click:$root.expandTimeSlotEvents" class="expandIcon" >                                                          
                    <a href="#"  >+</a>
                    <br/>
                </div>
            </div>                
            <div class="dvTimeSlotBar">    
                <div class="dvTimeSlotBlocks">
                    <span data-bind="text: slotName"></span>
                </div>            
            </div>
        </div>
    </div>
</script>

<div>     
    <table style="width:100%">
       <tr>
           <td>Timeline:</td>
           <td>Yearly<input type="radio" value="Yearly" id="Yearly"  data-bind="checked: selectedTimelineOption,click:generateTimeSlots" /></td>
           <td>Monthly<input type="radio" value="Monthly" data-bind="checked: selectedTimelineOption,click:generateTimeSlots "/>
           </td>
           <td>Daily<input type="radio" value="Daily" data-bind="checked: selectedTimelineOption,click:generateTimeSlots "/>
           </td>
       </tr>                 
    </table>     
</div>
<br/>
<div class="timelineFrame">
    <div class="dvTimeLine" data-bind="template: {name: 'slotTemplate', data:$data.timeSlots}">
    </div>
    <input id="slider"...

CSS

.timelineFrame
{
    width:460px;        
    border: 2px solid #878787;    
    background-color: #DDDDDD; 
}
.dvTimeLine {
    width:450px;
    height: 305px;         
    display:inline-block;
    white-space:nowrap;
    border-radius: 5px;
}
.dvTimeLineContainer
{
    width:100%;   
    height: 320px;    
}
.dvTimeLineSlot
{
    width:150px;    
    height: 300px;
    display:inline-block;
}
.dvEvents {    
    height: 250px;      
    float:left;
    width:150px;    
}


.dvTimeSlotBar {
    background-color: #5A4F51;
    width: 100%;
    height: 25px;
    background: -moz-linear-gradient(top, black, #444);
    background: -webkit-gradient(linear, left top, left bottom, from(black), to(#444));
    color: #CCCCCC;
    cursor:all-scroll;
    float:left;
    
}
.dvTimeSlotBlocks {
    
    height: 22px;
    line-height: 22px;
    color: #CCCCCC;
    border-left: 1px solid #CCC;
    padding-left: 5px;
    font-size: 10px;
    font-weight: bold;
    float: left;
    
}
.event
{
    word-wrap:break-word;    
    left:20px;
    top:40px;      
font-family: "Comic Sans MS", cursive;
    display: inline-block;
    color: #fff;
    background-color:#000;
    background: -moz-linear-gradient(bottom, black, #444);
    background: -webkit-gradient(linear, left bottom,left top, from(black), to(#444));
    border: 2px solid #fff;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 5px 5px 5px rgba(0,0,0,.5);
    position: relative;  
}
.event:after {
    word-wrap:break-word;
    content: "";
    display: block;
    background-color:#000;
    
    border: 2px solid #fff;
    border-width: 0 2px 2px 0;
    width: 24px;
    height: 24px;
    box-shadow: 5px 0 5px rgba(0,0,0,.5);
    position: absolute;
    bottom: -15px;
    left: 30px;
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    -o-transform: rotate(40deg);
}
.dvExpand
{
    height:25px;        
    width:25px;
    color:#FFFFFF;
    float:left;  
  ...

JavaScript

Date.prototype.monthNames = [
    "January", "February", "March","April", "May", "June",
    "July", "August", "September","October", "November", "December"
];

Date.prototype.getMonthName = function(month) {
    return this.monthNames[month];
};

function getMaxDay(month,year)
{    
    if(month==0 || month==2 || month== 4 || month==6 || month==7 || month==9 || month==11)
        return 31;
    else
    {
        if(month == 1)
        {
            if(year%4 == 0)
                return 29;
            else
                return 28; 
        }
        else return 30;
    }
};

function monthDiff(d1, d2) {
    var months;
    months = (d2.getFullYear() - d1.getFullYear()) * 12;
    months -= d1.getMonth();
    months += d2.getMonth();
    return months;
};


var TimeSlot=function(){
    this.slotName=new ko.observable("");
    this.events=new ko.observableArray([]);
    this.startTime=new ko.observable(new Date());
    this.endTime=new ko.observable(new Date());
};
    
TimeSlot.prototype = function() {
    var getTime = function() {
    };
    return {
        slotName       : this.slotName,
        events         : this.events,
        startTime      : this.startTime,
        endTime        : this.endTime
    };
};

var Event=function(){
    this.eventName=new ko.observable("");
    this.time=new ko.observable(new Date());
};
    
Event.prototype = function() {
    var getTime = function() {
        return this.time;
    };
    return {
        eventName    : this.eventName,
        time         : this.time
    };
};
    
var UserTimeLine = function(){
    this.mainTimeLine = new ko.observable();
    this.virtualTimeLines = new ko.observableArray([]);      
};

UserTimeLine.prototype = function(){
    return {
            mainTimeLine     : this.mainTimeLine,
            virtualTimeLines :this.virtualTimeLines 
    };
};


 
var TimeLine=function(){
    var self = this;
    self.startTime=new ko.observable(new Date());
    self.endTime=new ko.observable(new...