JSFiddle - React, Tailwind, and code Playground

by milosdakic

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<script id="tpl_line" type="text/x-jquery-tmpl">
    <div class="event-line">
        {{each Events}}
            {{tmpl "#tpl_event"}}
        {{/each}}
    </div>
</script>

<script id="tpl_event" type="text/x-jquery-tmpl">
    <div class="event hour">${Name}, ${Start}-${Finish}</div>
</script>


<div class="calendar">    
    <div class="times">
        <div><span>Noon</span><hr /><hr /></div>
        <div><span>1:00 PM</span><hr /><hr /></div>
        <div><span>2:00 PM</span><hr /><hr /></div>
        <div><span>3:00 PM</span><hr /><hr /></div>
    </div>
    
    <div class="events">
        
        <!--
        <div class="event-line">
        <div class="event hour" style="margin-top: 30px">Event #1</div>
        <div class="event half-hour" style="margin-top: 45px">2:00-2:30PM Event</div>
        <div class="event two-hrs">Event #7</div>
    </div>
        <div class="event two-hrs">12:00-2:00PM Event</div>
        <div class="event-line">
        <div class="event half-hour">2:00-2:30PM Event</div>
        <div class="event half-hour" style="margin-top: 15px">2:00-2:30PM Event</div>
        <div class="event half-hour" style="margin-top: 30px">2:00-2:30PM Event</div>
        <div class="event half-hour" style="margin-top: 45px">2:00-2:30PM Event</div>
    </div>
        <div class="event hour">2:30-3:30PM Event</div>
        <div class="event half-hour">2:30-3:30PM Event</div>
        -->
    </div>
    
</div>

CSS

* {
    font-family: Lucida Grande;
    font-size: 11px;
}

.calendar {
    width: 100%;
    display: -webkit-box;
}

.times {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    width: 8%;
    background: #ddd;
    color: #999;
    border: 1px solid #ccc;
}

.times div {
    height: 59px;
    border-bottom: 1px solid #ccc;
}

.times div span {
    display: block;
    position: absolute;
    width: 8%;
    padding: 0;
    margin: 0;
    text-align: center;
}

.times div hr {
    display: block;
    padding: 0;
    margin: 0;
    height: 29px;
    border: none;
    border-bottom: 1px solid #ccc;
}

.events {
    width: 93%;
}

.event-line {
    display: -webkit-box;
}

.event-block {
    display: block;
    -webkit-box-flex: 1;
}

.event-line > .event-block {
    margin-right: 0;
}

.event-block > .event {
    padding-right: 7px;
}

.event-block + .event {
    
}

.event {
    -webkit-box-flex: 1;
    background: #99cc33;
    border: 1px solid green;
    margin: 0 0 1px 1px;
    text-align: center;
    
    -webkit-border-radius: 3px;
}

.two-hrs {
    height: 117px;
}

.hour {
    height: 57px;
}

.half-hour {
    height: 27px;
}

.quarter {
    hight: 12px;
}

JavaScript

var list = [
    {
        Name: 'Daniel',
        Start: 9,
        Finish: 10
    },
    {
        Name: 'Milos',
        Start: 9.5,
        Finish: 11.5
    },
    {
        Name: 'Jim',
        Start: 11.5,
        Finish: 12.5
    }
];

var line = false;
var block = false;
var last = '00';
var lineEvents = [];

jQuery.each(list, function(key, event) {

    last = event.Finish;
    
    if (event.Name == 'Jim') line = false;
    else line = true;
    
    if (line == true) lineEvents.push(event);
    else events.push(event);
    
    $('#tpl_line').tmpl({Events: lineEvents}).appendTo('.events');
    
});