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);

}

}

總結

以上是生活随笔為你收集整理的html日历修改,HTML精美日历插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。