jquery-ccalendar

by Eric Blanchette

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/ui-lightness/jquery-ui.css">
<style>
    
    .ccalendar-day-7 {
    color:#770000;
    background:#00FF00;
    }
    
    .ccalendar-day-6 {
    color:#770000;
    background:#FFFF00;
    }
    
    .ccalendar-month {
    float:left;
    width:100px;
    background:grey;
    }
    
</style>

<!--
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="z-index: 1; display: block; "><div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"><a class="ui-datepicker-prev ui-corner-all" onclick="DP_jQuery_1309449867314.datepicker._adjustDate('#datepicker', -1, 'M');" title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a><a class="ui-datepicker-next ui-corner-all" onclick="DP_jQuery_1309449867314.datepicker._adjustDate('#datepicker', +1, 'M');" title="Next"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a><div class="ui-datepicker-title"><span class="ui-datepicker-month">June</span>&nbsp;<span class="ui-datepicker-year">2011</span></div></div><table class="ui-datepicker-calendar"><thead><tr><th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th><th><span title="Monday">Mo</span></th><th><span title="Tuesday">Tu</span></th><th><span title="Wednesday">We</span></th><th><span title="Thursday">Th</span></th><th><span title="Friday">Fr</span></th><th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th></tr></thead><tbody><tr><td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td><td class=" "...

CSS

div {
    margin:0px;
    padding:0px;
}

.ccalendar{
    font-family:verdana;
    width:300px;
}

.ccalendar-header-1{
    padding:0px;
    margin:0px;
    width:100%;
    background:#EEEEEE;
}
.ccalendar-header-2{
    padding:0px;
    margin:0px;
    width:100%;
    background:#888888;
}

.ccalendar-title {
    font-weight:bold;
    float:left;
}  
.ccalendar-title-year {
    font-weight:bold;
    float:right;
}
.ccalendar-title-week {
    font-weight:bold;
    text-align:center;
}
.ccalendar-title-month {
    font-weight:bold;
}
.ccalendar-title-day {
    font-weight:bold;
    text-align:center;
}


.ccalendar-week {
    float:left;
    width:20px;
    text-align:center;
}
.ccalendar-month {
    float:left;
    width:100px;
}
.ccalendar-days {
    float:right;
}
.ccalendar-day {
    float:left;
    width:25px;
    text-align:center;
    margin:0px;
}
.ccalendar-day-1 {
    color:#110000;
}
.ccalendar-day-2 {
    color:#002200;
}
.ccalendar-day-3 {
    color:#000033;
}
.ccalendar-day-4 {
    color:#440000;
}
.ccalendar-day-5 {
    color:#005500;
}
.ccalendar-day-6 {
    color:#000066;
}
.ccalendar-day-7 {
    color:#770000;
}

.clear-both{
    clear:both;
    margin:0px;
    padding:0px;
}

JavaScript

// jquery-plugin
(function($) {

    $.fn.ccalendar = function(options) {

        return this.each(function() {

            var opts = {},
                markup = "",
                monthWidth = 0,
                indexDate;

            $.extend(opts, $.fn.ccalendar.defaults, options);

            markup = $.fn.ccalendar.format(markup, opts);

            $(this).html(markup);

            for (var i = 0; i < opts.numberOfWeeks; i++) {
                $(this).find("div.ccalendar").append('<div><div class="ccalendar-week">' + (i + 1) + '</div><div class="ccalendar-month"></div><div class="ccalendar-days"><div class="ccalendar-day ccalendar-day-1">D</div><div class="ccalendar-day ccalendar-day-2">D</div><div class="ccalendar-day ccalendar-day-3">D</div><div class="ccalendar-day ccalendar-day-4">D</div><div class="ccalendar-day ccalendar-day-5">D</div><div class="ccalendar-day ccalendar-day-6">D</div><div class="ccalendar-day ccalendar-day-7">D</div></div></div><div class="clear-both"/>');
            }

            $("div.ccalendar-title-day").each(function(index, div) {
                $(div).html(opts.dayNamesMin[index]);
            });

            $("div.ccalendar-week").click(function() {
                if (opts.onWeekSelect !== undefined) {
                    opts.onWeekSelect("week selected!");
                }
            });

            $("div.ccalendar-month").click(function() {
                if (opts.onMonthSelect !== undefined) {
                    opts.onMonthSelect("month selected!");
                }
            });

            $("div.ccalendar-day").click(function() {
                if (opts.onDateSelect !== undefined) {
                    opts.onDateSelect("date selected!");
                }
            });


            indexDate = opts.startDate;

            // Configure getWeek
            if (indexDate.getWeek === undefined) {
                Date.prototype.getWeek = function() {
                    var determinedate = new...