1、以下是日历源码：
(function ($) {
function calendarWidget(el, params) {
var now = new Date();
var thismonth = now.getMonth();
var thisyear = now.getYear() + 1900;
var opts = {
month: thismonth,
year: thisyear,
prev_month_display:'<<',
next_month_display:'>>'
};
$.extend(opts, params);
var monthNames = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
var dayNames = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
month = i = parseInt(opts.month);
year = parseInt(opts.year);
var m = 0;
var table = '';
//original begin
// // next month
// if (month == 11) {
// var next_month = '<a href="?month=' + 1 + '&year=' + (year + 1) + '" title="' + monthNames[0] + ' ' + (year + 1) + '">' + monthNames[0] + ' ' + (year + 1) + '</a>';
// } else {
// var next_month = '<a href="?month=' + (month + 2) + '&year=' + (year) + '" title="' + monthNames[month + 1] + ' ' + (year) + '">' + monthNames[month + 1] + ' ' + (year) + '</a>';
// }
//
// // previous month
// if (month == 0) {
// var prev_month = '<a href="?month=' + 12 + '&year=' + (year - 1) + '" title="' + monthNames[11] + ' ' + (year - 1) + '">' + monthNames[11] + ' ' + (year - 1) + '</a>';
// } else {
// var prev_month = '<a href="?month=' + (month) + '&year=' + (year) + '" title="' + monthNames[month - 1] + ' ' + (year) + '">' + monthNames[month - 1] + ' ' + (year) + '</a>';
// }
//original end
//new code begin
var prevmonth = null;
var prevyear = null;
var nextmonth = null;
var nextyear = null;
//next_month
if (month == 11) {
nextmonth = 0;
nextyear = (year + 1);
var next_month = '<a id="next_month" href="#" val="{month:0,year:' + (year + 1) + '}" title="' + monthNames[0] + ' ' + (year + 1) + '">' + opts.next_month_display + '</a>';
} else {
nextmonth = (month + 1);
nextyear = (year);
var next_month = '<a id="next_month" href="#" val="{month:' + (month + 1) + ',year:' + (year) + '}" title="' + monthNames[month + 1] + ' ' + (year) + '">' + opts.next_month_display + '</a>';
}
// previous month
if (month == 0) {
prevmonth = 11;
prevyear = (year - 1);
var prev_month = '<a id="prev_month" href="#" val="{month:11,year:' + (year - 1) + '}" title="' + monthNames[11] + ' ' + (year - 1) + '">'+opts.prev_month_display+'</a>';
} else {
prevmonth = (month - 1);
prevyear = (year);
var prev_month = '<a id="prev_month" href="#" val="{month:' + (month - 1) + ',year:' + (year) + '}" title="' + monthNames[month - 1] + ' ' + (year) + '">'+opts.prev_month_display+'</a>';
}
//new code end
//table += ('<h3 id="current-month">' + monthNames[month] + ' ' + year + '</h3>');
// uncomment the following lines if you'd like to display calendar month based on 'month' and 'view' paramaters from the URL
//table += "<div id='nav_container'>";
//table += ('<div class="nav-prev" id="nav_prev_month">' + prev_month + '</div>');
//table += ('<div id="nav_current_month">' + year + '年' + monthNames[month] + '</div>');
// table += ('<div class="nav-next" id="nav_next_month">' + next_month + '</div>');
//table += "</div>";
//add for jiang
//table += "<div><a href=''>上个月</a><a href='#' style='margin-left:60%'>下个月</a></div>"
//add end
table += ('<table style="clear:both;" class="calendar-month " ' + 'id="calendar-month' + i + ' " cellspacing="0">');
table += '<tr> \
<th style="background-color:#C0C0C0;"><div class="nav-prev" id="nav_prev_month">' + prev_month + '</div></th> \
<th style="background-color:#C0C0C0;" colspan="5"><div id="nav_current_month">' + year + '年' + monthNames[month] + '</div></th> \
<th style="background-color:#C0C0C0;"><div class="nav-next" id="nav_next_month">' + next_month + '</div></th> \
</tr>';
table += '<tr>';
for (d = 0; d < 7; d++) {
table += '<th class="weekday">' + dayNames[d] + '</th>';
}
table += '</tr>';
var days = getDaysInMonth(month, year);
var firstDayDate = new Date(year, month, 1);
var firstDay = firstDayDate.getDay();
var prev_days = getDaysInMonth(month, year);
var firstDayDate = new Date(year, month, 1);
var firstDay = firstDayDate.getDay();
var prev_m = month == 0 ? 11 : month - 1;
var prev_y = prev_m == 11 ? year - 1 : year;
var prev_days = getDaysInMonth(prev_m, prev_y);
firstDay = (firstDay == 0 && firstDayDate) ? 7 : firstDay;
var i = 0;
var title = "";
var cell = {};
for (j = 0; j < 42; j++) {
if ((j < firstDay)) {//before this month day
title = prevyear + '-' + leftpad(String(prevmonth), '0', 2) + '-' + leftpad(String((prev_days - firstDay + j + 1)), '0', 2);
cell.title = title;
cell.content = '<span class="day">' + (prev_days - firstDay + j + 1) + '</span>';
cell.style = '';
if (typeof opts.onCellInit === "function") {
opts.onCellInit(cell);
}
table += ('<td style="' + cell.style + '" title="' + cell.title + '" class="other-month">' + cell.content + '</td>');
} else if ((j >= firstDay + getDaysInMonth(month, year))) {//after this month day
i = i + 1;
title = nextyear + '-' + leftpad(String(nextmonth), '0', 2) + '-' + leftpad(String(i), '0', 2);
cell.title = title;
cell.content = '<span class="day">' + i + '</span>';
cell.style = '';
if (typeof opts.onCellInit === "function") {
opts.onCellInit(cell);
}
table += ('<td style="' + cell.style + '" title="' + cell.title + '" class="other-month">' + cell.content + '</td>');
} else {//this month day
title = thisyear + '-' + leftpad(String(thismonth), '0', 2) + '-' + leftpad(String((j - firstDay + 1)), '0', 2);
cell.title = title;
cell.content = '<span class="day">' + (j - firstDay + 1) + '</span>';
cell.style = '';
if (typeof opts.onCellInit === "function") {
opts.onCellInit(cell);
}
if ((j - firstDay + 1) == now.getDate() && opts.year == thisyear && opts.month == thismonth)
table += ('<td style="' + cell.style + '" title="' + cell.title + '" class="current-month current-day">' + cell.content + '</td>');
else
table += ('<td style="' + cell.style + '" title="' + cell.title + '" class="current-month day">' + cell.content + '</td>');
}
if (j % 7 == 6) table += ('</tr>');
}
table += ('</table>');
el.html(table);
}
function getDaysInMonth(month, year) {
var daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
if ((month == 1) && (year % 4 == 0) && ((year % 100 != 0) || (year % 400 == 0))) {
return 29;
} else {
return daysInMonth[month];
}
}
//mount event
function mountEvent(el, params) {
el.delegate("#prev_month", "click", function () {
eval("var param=" + $(this).attr("val"));
if (typeof params === "object") {
$.extend(params,param);
}
calendarWidget(el, params);
});
el.delegate("#next_month", "click", function () {
eval("var param=" + $(this).attr("val"));
if (typeof params === "object") {
$.extend(params, param);
}
calendarWidget(el, params);
});
}
//mount css
function mountCss(el, params) {
el.delegate("td", "click", function () {
//恢复样式
if (typeof window.lastSelectedDate !== "undefined") {
window.lastSelectedDate.removeClass(); //删除样式
window.lastSelectedDate.attr("style", window.lastStyle); //恢复style
window.lastSelectedDate.addClass(window.lastClass); //恢复class
}
//存储当前样式
window.lastSelectedDate = $(this);
window.lastStyle = $(this).attr("style");
window.lastClass = $(this).attr("class");
//改变当前样式
$(this).removeClass(); //删除类选择器
$(this).removeAttr("style"); //删除当前样式
$(this).addClass("selected-day"); //添加类选择器
if (typeof params.onSelectedDay === "function") {
params.onSelectedDay(this, $(this).attr("title"));
}
});
//css code
var calendarcss = "<style type='text/css'> \
a{text-decoration:none;}\
.selected-day \
{ \
color:#CCFF99; \
background-color:#6495ED; \
font-weight:bold; \
} \
.current-day \
{ \
background-color:#FAFAD2; \
}\
#" + el.attr("id") + " #nav_container \
{ \
height:20px; \
width:848px; \
} \
#" + el.attr("id") + " #nav_container #nav_prev_month \
{ } \
#" + el.attr("id") + " #nav_container #nav_current_month \
{ } \
#" + el.attr("id") + " #nav_container #nav_next_month \
{ } \
#" + el.attr("id") + " table td, th \
{ \
border-left: 1px solid #999; \
border-bottom: 1px solid #999; \
padding: 10px 0; \
text-align: center; \
} \
#" + el.attr("id") + " table \
{ \
border-right: 1px solid #999; \
border-top: 1px solid #999; \
} \
#" + el.attr("id") + " table th \
{ \
background: #666; \
color: #fff; \
} \
.other-month \
{ \
background: #eee; \
} \
</style>";
$("head").append(calendarcss);
}
//左填充字符
//str:原始字符,tag:填充字符,len:填充后长度
function leftpad(str, tag, len) {
if (str.length < len) {
var lef = new Array(len - str.length);
for (var i = 0; i < lef.length; i++) {
lef[0] = tag;
}
return lef.join("") + str;
}
return str;
}
// jQuery plugin initialisation
$.fn.calendarWidget = function (params) {
calendarWidget(this, params);
mountEvent(this,params); //挂载事件
var opts = {};
$.extend(opts, params);
if (typeof opts.enabledcss === "undefined")
opts.enabledcss = true;
if (opts.enabledcss)
mountCss(this, params); //挂载Css
return this;
};
})(jQuery);
2、使用页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery.calendar-widget.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#mycalendar").calendarWidget({
enabledcss: "true",
onSelectedDay: function (sender, title) {
alert(title);
},
onCellInit: function (cell) {
cell.style = "width:120px;";
}
});
});
</script>
</head>
<body>
<div id="mycalendar"></div>
</body>
</html>
3、运行效果：
