JSFiddle - React, Tailwind, and code Playground

by oroce

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="row">
    <div class="span1 backward">&lt;&lt;</div>
    <div class="span7 week-view" style="overflow:hidden">
        <div id="calendar" class="row"></div>
    </div>
    <div class="span1 forward">&gt;&gt;</div>
</div>

CSS

.week-view{
 height: 40px;
}
.today{
background-color:yellow;
}
.forward{
    cursor:pointer;
}
.backward{
    cursor:pointer;
}

JavaScript

var container = $("div#calendar");
var mNames = ["Jan","Feb","Mar","Apr","May","Jun","Jul", "Aug","Sep","Oct","Nov","Dec"];
(function(currentDay,dayOfWeek) {
    ("" + Array(30)).split("").map(function(v, n) {
        var d = new Date();
        console.log( currentDay, n , dayOfWeek)
        d.setDate(currentDay + n - dayOfWeek + 1);
        return d;
    }).forEach(function(date) {
        container.append(
            '<div class="span1'+ (currentDay===date.getDate() ? " today": "") +'">'+
                '<small>' + 
                    mNames[ date.getMonth() ] + 
                '</small>'+
                '<p>' + 
                    date.getDate() + 
                '</p>'+
            '</div>'
        );
    });

})(new Date().getDate(), new Date().getDay() );

$( ".forward" ).on( "click", function(){
    var currLeft = parseInt( container.css("margin-left" ), 10 );
    if( currLeft <= 3*560 ){
//return;        
    }
    container.animate({
        "margin-left": "-=560"
    });
});

$( ".backward" ).on( "click", function(){
    var currLeft = parseInt( container.css("margin-left" ), 10 );
    if( currLeft === 0 ){
//return;        
    }
    container.animate({
        "margin-left": "+=560"
    });
});