Compact Calendar

HTML

<div id="myCal" class=''></div>

CSS

body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
}

.ccal {
    width:240px;
}


.ccal .clear {
    clear:both;
}

.ccal .header {
    background: #99D2F0;
}
.ccal .subheader {
    background: #737373;
    color:white;
}

.ccal .subheader .day-of-week-0,
.ccal .subheader .day-of-week-6,{
    background:#8F8F8F;
}

.ccal .title {
    float:left;
    font-size:120%;
}

.ccal .year-title {
    float:right;
    font-size:120%;
}

.ccal .month-title {
    float:left;
    background:#737373;
    color:white;
}

.ccal .cell {
    width: 20px;
    text-align:center;
}
.ccal .row {
    float:right;
}



.ccal .col {
    min-width: 80px;
}

.ccal .month {
    float:left;
    background: #99D2F0;
}

.ccal .month-empty {
    float:left;
}

.ccal .day-of-week {
    float:left;
}

.ccal .day-of-month {
    float:left;
}

.ccal .day-of-week-0,
.ccal .day-of-week-6
{
    background:white;
    color:#B6B6B6;
}

.ccal .day-of-month-1 { 
    background:#99D2F0;
}

JavaScript

(function ( $ ) {
            
    $.fn.ccal = function(options) {
        
        // Sunday = 0
                
        var settings = $.extend({
            // These are the defaults.
            title: 'Compact Calendar',
            monthTitle: 'Kk',
            days: ['Su','Ma','Ti','Ke','To','Pe','La'],
            months: ['Tammi','Helmi','Maalis','Huhti','Touko','Kesä','Heinä','Elo','Syys','Loka','Marras','Joulu'],
            startDate: new Date(),
            weekStartsOn: 1,
            maxDays:280
        }, options );
                
        var DAY = 24 * 60 * 60 * 1000;
        
        this.filter( "div" ).each(function() {
            
            var $div = $(this);
            $div.addClass('ccal');
            $div.html('');
            
            var dateIndex = settings.startDate;
                        
            // Reset to week starts on
            while(dateIndex.getDay() !== settings.weekStartsOn){
                dateIndex.setTime(dateIndex.getTime() - DAY);
            }
                        
            // Render header
            $div.append('<div class="header"><div class="title">' + settings.title + '</div>' +
                '<div class="year-title">' + dateIndex.getFullYear() + '</div><div class="clear"></div></div>');
            
            // Render Subheader
            var $subHeader = $('<div class="subheader"></div>');            
            
            // Month Title
            $subHeader.append('<div class="month-title col">' + settings.monthTitle + '</div>');
    
            // Days of the week
            var $row = $('<div class="row"></div>');
            for(var i=0; i<7; i++){                
                var d = settings.weekStartsOn + i;                
                if(d > 6) {
                    d = d - 7;
                }
                $row.append('<div class="day-of-week cell day-of-week-' + d + '"">' + settings.days[d] + '</div>');    
            }
           ...