html日历修改,HTML精美日历插件

Html精美日历插件，包括日期选择，日期查看，星期查看等等功能。文章末尾附有演示地址。先看看效果图：

 

 

源代码：var CalendarHandler = {

currentYear: 0,

currentMonth: 0,

isRunning: false,

initialize: function() {

$calendarItem = this.CreateCalendar(0, 0, 0);

$("#Container").append($calendarItem);

$("#context").css("height", $("#CalendarMain").height() - 65   "px");

$("#center").css("height", $("#context").height() - 30   "px");

$("#selectYearDiv").css("height", $("#context").height() - 30   "px").css("width", $("#context").width()   "px");

$("#selectMonthDiv").css("height", $("#context").height() - 30   "px").css("width", $("#context").width()   "px");

$("#centerCalendarMain").css("height", $("#context").height() - 30   "px").css("width", $("#context").width()   "px");

$calendarItem.css("height", $("#context").height() - 30   "px"); //.css("visibility","hidden");

$("#Container").css("height", "0px").css("width", "0px").css("margin-left", $("#context").width() / 2   "px").css("margin-top", ($("#context").height() - 30) / 2   "px");

$("#Container").animate({

width: $("#context").width()   "px",

height: ($("#context").height() - 30) * 2   "px",

marginLeft: "0px",

marginTop: "0px"

}, 300, function() {

$calendarItem.css("visibility", "visible");

});

$(".dayItem").css("width", $("#context").width()   "px");

var itemPaddintTop = $(".dayItem").height() / 6;

$(".item").css({

"width": $(".week").width() / 7   "px",

"line-height": itemPaddintTop   "px",

"height": itemPaddintTop   "px"

});

$(".currentItem>a").css("margin-left", ($(".item").width() - 25) / 2   "px").css("margin-top", ($(".item").height() - 25) / 2   "px");

$(".week>h3").css("width", $(".week").width() / 7   "px");

this.RunningTime();

},

CreateSelectYear: function() {

$(".currentDay").show();

$("#selectYearDiv").children().remove();

var yearindex = 0;

for (var i = this.currentYear - 5; i 

yearindex  ;

if (i == this.currentYear) $("#selectYearDiv").append($(""   i   ""));

else $("#selectYearDiv").append($(""   i   ""));

if (yearindex == 1 || yearindex == 5 || yearindex == 9) $("#selectYearDiv").find("#"   yearindex).css("border-left-color", "#fff");

if (yearindex == 4 || yearindex == 8 || yearindex == 12) $("#selectYearDiv").find("#"   yearindex).css("border-right-color", "#fff");

}

$("#selectYearDiv>div").css("width", ($("#center").width() - 4) / 4   "px").css("line-height", ($("#center").height() - 4) / 3   "px");

$("#centerMain").animate({

marginLeft: "0px"

}, 300);

},

CreateSelectMonth: function() {

$(".currentDay").show();

$("#selectMonthDiv").children().remove();

for (var i = 1; i 

if (i == this.currentMonth) $("#selectMonthDiv").append($(""   i   "月"));

else $("#selectMonthDiv").append($(""   i   "月"));

if (i == 1 || i == 5 || i == 9) $("#selectMonthDiv").find("#"   i).css("border-left-color", "#fff");

if (i == 4 || i == 8 || i == 12) $("#selectMonthDiv").find("#"   i).css("border-right-color", "#fff");

}

$("#selectMonthDiv>div").css("width", ($("#center").width() - 4) / 4   "px").css("line-height", ($("#center").height() - 4) / 3   "px");

$("#centerMain").animate({

marginLeft: -$("#center").width() * 2   "px"

}, 300);

},

IsRuiYear: function(aDate) {

return (0 == aDate % 4 && (aDate % 100 != 0 || aDate % 400 == 0));

},

CalculateWeek: function(y, m, d) {

if (m == 1) {

m = 13;

y--;

}

if (m == 2) {

m = 14;

y--;

}

var week = (d   2 * m   3 * (m   1) / 5   y   y / 4 - y / 100   y / 400) % 7   1;

return week;

},

CalculateMonthDays: function(m, y) {

var mDay = 0;

if (m == 0 || m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {

mDay = 31;

} else {

if (m == 2) {

//判断是否为芮年

var isRn = this.IsRuiYear(y);

if (isRn == true) {

mDay = 29;

} else {

mDay = 28;

}

} else {

mDay = 30;

}

}

return mDay;

},

CreateCalendar: function(y, m, d) {

$dayItem = $("");

//获取当前月份的天数

var nowDate = new Date();

if(y==nowDate.getFullYear()&&m==nowDate.getMonth() 1||(y==0&&m==0))

$(".currentDay").hide();

var nowYear = y == 0 ? nowDate.getFullYear() : y;

this.currentYear = nowYear;

var nowMonth = m == 0 ? nowDate.getMonth()   1 : m;

this.currentMonth = nowMonth;

var nowDay = d == 0 ? nowDate.getDate() : d;

$(".selectYear").html(nowYear   "年");

$(".selectMonth").html(nowMonth   "月");

var nowDaysNub = this.CalculateMonthDays(nowMonth, nowYear);

//获取当月第一天是星期几

//var weekDate = new Date(nowYear "-" nowMonth "-" 1);

//alert(ss.getDay());

var nowWeek = parseInt(this.CalculateWeek(nowYear, nowMonth, 1));

//var nowWeek=weekDate.getDay();

//获取上个月的天数

var lastMonthDaysNub = this.CalculateMonthDays((nowMonth - 1), nowYear);

if (nowWeek != 0) {

//生成上月剩下的日期

for (var i = (lastMonthDaysNub - (nowWeek - 1)); i 

$dayItem.append(""   (i   1)   "");

}

}

//生成当月的日期

for (var i = 0; i 

if (i == (nowDay - 1)) $dayItem.append(""   (i   1)   "");

else $dayItem.append(""   (i   1)   "");

}

//获取总共已经生成的天数

var hasCreateDaysNub = nowWeek   nowDaysNub;

//如果小于42，往下个月推算

if (hasCreateDaysNub 

for (var i = 0; i <= (42 - hasCreateDaysNub); i  ) {

$dayItem.append(""   (i   1)   "");

}

}

return $dayItem;

},

CSS: function() {

var itemPaddintTop = $(".dayItem").height() / 6;

$(".item").css({

"width": $(".week").width() / 7   "px",

"line-height": itemPaddintTop   "px",

"height": itemPaddintTop   "px"

});

$(".currentItem>a").css("margin-left", ($(".item").width() - 25) / 2   "px").css("margin-top", ($(".item").height() - 25) / 2   "px");

},

CalculateNextMonthDays: function() {

if (this.isRunning == false) {

$(".currentDay").show();

var m = this.currentMonth == 12 ? 1 : this.currentMonth   1;

var y = this.currentMonth == 12 ? (this.currentYear   1) : this.currentYear;

var d = 0;

var nowDate = new Date();

if (y == nowDate.getFullYear() && m == nowDate.getMonth()   1) d = nowDate.getDate();

else d = 1;

$calendarItem = this.CreateCalendar(y, m, d);

$("#Container").append($calendarItem);

this.CSS();

this.isRunning = true;

$($("#Container").find(".dayItem")[0]).animate({

height: "0px"

}, 300, function() {

$(this).remove();

CalendarHandler.isRunning = false;

});

}

},

CalculateLastMonthDays: function() {

if (this.isRunning == false) {

$(".currentDay").show();

var nowDate = new Date();

var m = this.currentMonth == 1 ? 12 : this.currentMonth - 1;

var y = this.currentMonth == 1 ? (this.currentYear - 1) : this.currentYear;

var d = 0;

if (y == nowDate.getFullYear() && m == nowDate.getMonth()   1) d = nowDate.getDate();

else d = 1;

$calendarItem = this.CreateCalendar(y, m, d);

$("#Container").append($calendarItem);

var itemPaddintTop = $(".dayItem").height() / 6;

this.CSS();

this.isRunning = true;

$($("#Container").find(".dayItem")[0]).animate({

height: "0px"

}, 300, function() {

$(this).remove();

CalendarHandler.isRunning = false;

});

}

},

CreateCurrentCalendar: function() {

if (this.isRunning == false) {

$(".currentDay").hide();

$calendarItem = this.CreateCalendar(0, 0, 0);

$("#Container").append($calendarItem);

this.isRunning = true;

$($("#Container").find(".dayItem")[0]).animate({

height: "0px"

}, 300, function() {

$(this).remove();

CalendarHandler.isRunning = false;

});

this.CSS();

$("#centerMain").animate({

marginLeft: -$("#center").width()   "px"

}, 500);

}

},

RunningTime: function() {

var mTiming = setInterval(function() {

var nowDate = new Date();

var nowTime = nowDate.getHours()   ":"   nowDate.getMinutes()   ":"   nowDate.getSeconds();

$("#footNow").html(nowTime);

}, 1000);

}

}