SO - 18324767

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<script src="http://www.nealfletcher.co.uk/js/jquery.imagesloaded.js"></script>
<link rel="stylesheet" href="http://www.nealfletcher.co.uk/js/datepicker.css">
<link rel="stylesheet" href="http://www.nealfletcher.co.uk/js/normalize.css">
<script src="http://www.nealfletcher.co.uk/js/jquery-ui-1.8.18.custom.min.js"></script>
<div id="datepicker"></div>
<div id="block-wrap">
    <div class="blocks" data-value="1782013 1882013 1982013">17/08 — 19/08</div>
    <div class="blocks" data-value="2182013 2282013 2382013">21/08 — 23/08</div>
    <div class="blocks" data-value="2582013 2682013 2782013 2882013 2982013">25/08 — 29/08</div>    
</div>
<div id="buttons">
    <li id="today">Today</li>
    <li id="week">This Week</li>
    <li id="month">This Month</li>
</div>

CSS

#datepicker {
    position: absolute;
    left: 5px;
    top: 5px;
    z-index: 9999;
}
#block-wrap {
    position: absolute;
    padding-left: 30px;
    top: 240px;
    width: auto;
}
.blocks {
    position: relative;
    width: 80px;
    height: 40px;
    background-color: silver;
    float: left;
    margin-right: 5px;
    margin-bottom: 5px;
}
.isotope-item {
    z-index: 2;
}
.isotope-hidden.isotope-item {
    z-index: 1;
}
.isotope, .isotope .isotope-item {
    /* change duration value to whatever you like */
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    -ms-transition-property: height, width;
    -o-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    -ms-transition-property: -ms-transform, opacity;
    -o-transition-property: -o-transform, opacity;
    transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
 .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -ms-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
}
#buttons {
    position: absolute;
    left: 330px;
    top: 10px;
    cursor: pointer;
}

td.special .ui-state-default{
    color: red;
}

JavaScript

var $container = $('#block-wrap');
var $blocks = $("div.blocks", "#block-wrap");

$(function () {
    var blocks = $('#block-wrap .blocks')
    $('#datepicker').datepicker({
        inline: true,
        //nextText: '&rarr;',
        //prevText: '&larr;',
        showOtherMonths: true,
        //dateFormat: 'dd MM yy',
        dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
        //showOn: "button",
        //buttonImage: "img/calendar-blue.png",
        //buttonImageOnly: true,
        onSelect: function (dateText, inst) {
            var date = new Date(dateText);
            var dateValue = date.getDate().toString() + (date.getMonth() + 1).toString() + date.getFullYear().toString();

            $container.isotope({
                filter: '[data-value~="' + dateValue + '"]'
            });
        },
        beforeShowDay: function(date){
            var target = date.getDate().toString() + (date.getMonth() + 1).toString() + date.getFullYear().toString();
            var contains = blocks.filter('[data-value~="' + target + '"]').length > 0;
            return [true, contains ? 'special' : '', '']
        }
    });
});

$container.imagesLoaded(function () {
    $container.isotope({
        itemSelector: '.blocks',
        animationEngine: 'css',
        masonry: {
            columnWidth: 5
        }
    });
});

var prepareData = function (howLong) {
    var mode = howLong,
        date = new Date(),
        days = 0,
        d = date.getDate(),
        m = date.getMonth(),
        y = date.getFullYear(),
        duration = [],
        durationReady = [];

    if (mode === "week") {
        days = 7;
    } else if (mode === "month") {
        days = 30;
    }

    for (i = 0; i < days; i++) {
        // for each day create date objects in an array
        duration[i] = new Date(y, m, d + i);

        // convert objects into strings
        // fe. 25th of May becomes '2552013'
        durationReady[i] = duration[i].getDate().toString() +...