lanior/calendar.css

## calendar.css
.calendar {
    border: 1px solid #d0cdca;
    background-color: #f2f1f0;

    padding: 8px;

    font-size: 14px;

    float: left;
}

.calendar .day {
}

.calendar .header {
    border: 1px solid #d0cdca;
    border-bottom: none;
    padding: 4px;
}

.calendar .days {
    border: 1px solid #d0cdca;
    padding: 4px;
    background-color: white;
}

.calendar .day_name {
    background-color: #e5e3e1;
}

.calendar .day_name, .calendar .day {
    text-align: center;
    width: 32px;
}

.calendar a.day:hover {
    background-color: #e5e3e1;
}

.calendar a.current.day {
    background-color: #e5e3e1;
}

.calendar table {
    border-spacing: 0;
    background-color: white;
}

.calendar table a, .calendar table span {
    display: block;
    padding: 3px;
    outline: none;
}

.calendar table a {
    color: black;
    text-decoration: none;
}

.calendar .day.another_month {
    color: #d7d4d8;
}

.calendar td {
    padding: 0;
    margin: 0;

    font-size: 14px;
}

#prev_month, #next_month,
#prev_year, #next_year {
    color: #6d6d6d;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
}

#year_selection {
    float: right;
}

#current_month {
    text-align: center;
    width: 80px;

    display: inline-block;
    zoom: 1; *display: inline;
}

## calendar.html
<html>
  <head>
    <meta charset="utf-8" />
    <title>JS Calendar</title>
    <link rel="stylesheet" type="text/css" href="calendar.css" />
    <script type="text/javascript" src="http://yandex.st/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="calendar.js"></script>

  </head>
  <body onload="init()">
    <input id="selected_date" type="text" readonly value="" />

    <br /><br />

    <div class="calendar">
      <div class="header">
        <span id="month_selection">
          <a href="#" id="prev_month">&lsaquo;</a>
          <span id="current_month">November</span>
          <a href="#" id="next_month">&rsaquo;</a>
        </span>

        <span id="year_selection">
          <a href="#" id="prev_year">&lsaquo;</a>
          <span id="current_year">2010</span>
          <a href="#" id="next_year">&rsaquo;</a>
        </span>
      </div>

      <div class="days">
        <table id="calendar_table" cell-spacing="0">
        </table>
      </div>
    </div>
  </body>
</html>

## calendar.js
(function ()
{
    var day_names = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
    var month_names = ["January", "February", "March", "April", "May", "June",
        "July", "August", "September", "October", "November", "December"];
    var day, month, year;

    var cells = [];

    var getDayByIndex = function (index) {
        var first_day = 1 - (new Date(year, month).getDay());
        return new Date(year, month, first_day + index);
    };

    var setDate = function (date) {
        day = date.getDate();
        month = date.getMonth();
        year = date.getFullYear();

        $('#current_month').text(month_names[month]);
        $('#current_year').text(year);
        update();
    };

    var update = function () {
        for (var i = 0; i < 6; i++) {
            for (var j = 0; j < 7; j++) {
                var cell_date = getDayByIndex(i*7+j);
                var cell = cells[i+1][j];

                cell.text(cell_date.getDate());
                cell.removeClass().addClass("day");
                if (cell_date.getMonth() != month) cell.addClass("another_month");
                else if (cell_date.getDate() == day) cell.addClass("current");
            }
        }
    };

    var selectDay = function () {
        var date = getDayByIndex($(this).data("dayIndex"));
        setDate(date);
        $('#selected_date').val(date.toDateString());
    };

    init = function () {
        var table = $('#calendar_table');

        var changeDate = function (new_year, new_month) {
            var day_limit = new Date(new_year, new_month + 1, 0).getDate();
            setDate(new Date(new_year, new_month, Math.min(day, day_limit)));
        };

        $('#prev_month').click(function () {
            changeDate(year, month - 1);
            return false;
        });

        $('#next_month').click(function () {
            changeDate(year, month + 1);
            return false;
        });

        $('#prev_year').click(function () {
            changeDate(year - 1, month);
            return false;
        });

        $('next_year').click(function () {
            changeDate(year + 1, month);
            return false;
        });

        for (var i = 0; i < 7; i++) {
            var tr = $("<tr>");
            cells.push([]);

            for (var j = 0; j < 7; j++) {
                var td = $("<td>"),
                    el  = $(i > 0 ? "<a>" : "<span>");

                if (i == 0) el.text(day_names[j]);
                else {
                    el.text("&nbsp;")
                        .attr("href", "#")
                        .click(selectDay)
                        .data("dayIndex", (i-1)*7 + j);
                }

                el
                    .addClass((i > 0) ? "day" : "day_name")
                    .appendTo(td);

                td.appendTo(tr);

                cells[i].push(el);
            }
            tr.appendTo(table);
        }
        setDate(new Date());
    };
})();
	.calendar {
	border: 1px solid #d0cdca;
	background-color: #f2f1f0;

	padding: 8px;

	font-size: 14px;

	float: left;
	}

	.calendar .day {
	}

	.calendar .header {
	border: 1px solid #d0cdca;
	border-bottom: none;
	padding: 4px;
	}

	.calendar .days {
	border: 1px solid #d0cdca;
	padding: 4px;
	background-color: white;
	}

	.calendar .day_name {
	background-color: #e5e3e1;
	}

	.calendar .day_name, .calendar .day {
	text-align: center;
	width: 32px;
	}

	.calendar a.day:hover {
	background-color: #e5e3e1;
	}

	.calendar a.current.day {
	background-color: #e5e3e1;
	}

	.calendar table {
	border-spacing: 0;
	background-color: white;
	}

	.calendar table a, .calendar table span {
	display: block;
	padding: 3px;
	outline: none;
	}

	.calendar table a {
	color: black;
	text-decoration: none;
	}

	.calendar .day.another_month {
	color: #d7d4d8;
	}

	.calendar td {
	padding: 0;
	margin: 0;

	font-size: 14px;
	}

	#prev_month, #next_month,
	#prev_year, #next_year {
	color: #6d6d6d;
	text-decoration: none;
	font-size: 18px;
	font-weight: bold;
	}

	#year_selection {
	float: right;
	}

	#current_month {
	text-align: center;
	width: 80px;

	display: inline-block;
	zoom: 1; *display: inline;
	}
	<html>
	<head>
	<meta charset="utf-8" />
	<title>JS Calendar</title>
	<link rel="stylesheet" type="text/css" href="calendar.css" />
	<script type="text/javascript" src="http://yandex.st/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript" src="calendar.js"></script>

	</head>
	<body onload="init()">
	<input id="selected_date" type="text" readonly value="" />

	<br /><br />

	<div class="calendar">
	<div class="header">
	<span id="month_selection">
	<a href="#" id="prev_month">&lsaquo;</a>
	<span id="current_month">November</span>
	<a href="#" id="next_month">&rsaquo;</a>
	</span>

	<span id="year_selection">
	<a href="#" id="prev_year">&lsaquo;</a>
	<span id="current_year">2010</span>
	<a href="#" id="next_year">&rsaquo;</a>
	</span>
	</div>

	<div class="days">
	<table id="calendar_table" cell-spacing="0">
	</table>
	</div>
	</div>
	</body>
	</html>
	(function ()
	{
	var day_names = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
	var month_names = ["January", "February", "March", "April", "May", "June",
	"July", "August", "September", "October", "November", "December"];
	var day, month, year;

	var cells = [];

	var getDayByIndex = function (index) {
	var first_day = 1 - (new Date(year, month).getDay());
	return new Date(year, month, first_day + index);
	};

	var setDate = function (date) {
	day = date.getDate();
	month = date.getMonth();
	year = date.getFullYear();

	$('#current_month').text(month_names[month]);
	$('#current_year').text(year);
	update();
	};

	var update = function () {
	for (var i = 0; i < 6; i++) {
	for (var j = 0; j < 7; j++) {
	var cell_date = getDayByIndex(i*7+j);
	var cell = cells[i+1][j];

	cell.text(cell_date.getDate());
	cell.removeClass().addClass("day");
	if (cell_date.getMonth() != month) cell.addClass("another_month");
	else if (cell_date.getDate() == day) cell.addClass("current");
	}
	}
	};

	var selectDay = function () {
	var date = getDayByIndex($(this).data("dayIndex"));
	setDate(date);
	$('#selected_date').val(date.toDateString());
	};

	init = function () {
	var table = $('#calendar_table');

	var changeDate = function (new_year, new_month) {
	var day_limit = new Date(new_year, new_month + 1, 0).getDate();
	setDate(new Date(new_year, new_month, Math.min(day, day_limit)));
	};

	$('#prev_month').click(function () {
	changeDate(year, month - 1);
	return false;
	});

	$('#next_month').click(function () {
	changeDate(year, month + 1);
	return false;
	});

	$('#prev_year').click(function () {
	changeDate(year - 1, month);
	return false;
	});

	$('next_year').click(function () {
	changeDate(year + 1, month);
	return false;
	});

	for (var i = 0; i < 7; i++) {
	var tr = $("<tr>");
	cells.push([]);

	for (var j = 0; j < 7; j++) {
	var td = $("<td>"),
	el = $(i > 0 ? "<a>" : "<span>");

	if (i == 0) el.text(day_names[j]);
	else {
	el.text(" ")
	.attr("href", "#")
	.click(selectDay)
	.data("dayIndex", (i-1)*7 + j);
	}

	el
	.addClass((i > 0) ? "day" : "day_name")
	.appendTo(td);

	td.appendTo(tr);

	cells[i].push(el);
	}
	tr.appendTo(table);
	}
	setDate(new Date());
	};
	})();