日曆插件
最近作了一個網頁的日曆插件，可在裏面填充東西喲~！代碼能夠直接複製運行哦~~~
第一次用博客，代碼能夠傳到文件中下載吧？其實這個日曆也是我在網上找到的，本身研究了兩天，作了些許修改~~javascript
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="Html日曆插件，Html精美日曆插件，Jquery多功能日曆插件" />
<meta name="description" content="Html日曆插件，多功能-彭亞歐我的博客代碼演示中心" />
<title>Html日曆插件</title>
<style type="text/css">
body {
background-color: white;
}
#CalendarMain {
width: 1280px;
height: 685px;
overflow: hidden;
border: 1px solid #ccc;
margin: 0 auto;
margin-top: 30px;
}
#title {
width: 187px;
height: 17px;
margin: auto;
margin-top: 30px;
color:#344c67;
}
/*當前天的日數或每個月的一號*/
.baoma{
background-color: #e1f3fc;
width: 166px;
height: 19px;
margin-left: 5px;
text-align:left;
}
.hanzi{
float:left;
text--align:left;
}
.shuzi{
float:right;
text--align:right;
}
.selectBtn {
/* font-weight: 900; */
font-size: 17px;
/*color: #fff;*/
cursor: pointer;
text-decoration: none;
color:#344c67;
/*padding: 7px 10px 6px 10px;*/
}
.selectBtn:hover {
color: #4c637b;
}
.selectYear {
/*float: left;*/
margin-left: 28px;
position: absolute;
}
.selectMonth {
/*float: left;*/
margin-left: 86px;
position: absolute;
}
.month {
/*float: left;*/
position: absolute;
}
.nextMonth {
/*float: right;*/
margin-left: 129px;
}
.currentDay {
float: right;
}
#context {
background-color: #fff;
width: 100%;
margin-top:0px;
}
.week {
width: 97%;
height: 40px;
background-color: #e8f5e0;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
/*color: #4c637b;*/
}
.week>h3 {
float: left;
color: #4c637b;
text-align: center;
/*margin: 0;
padding: 0;*/
margin-top: 5px;
font-size: 17px;
/*border: 1px solid #d4d9df;*/
}
.dayItem {
float: left;
color: #4c637b;
}
.lastItem {
color: #d1c7b7 !important;
border: 1px solid #d4d9df;
}
#center{
margin: 20px;
/*border-bottom: none;
border-right: none;
border-top: none;
border-left: none;*/
}
.item {
color: #4c637b;
float: left;
text-align: right;
cursor: pointer;
margin: 0;
/* font-family: "微軟雅黑"; */
font-size: 13px;
border: 1px solid #d4d9df;
/* border-bottom: none;
border-right: none;*/
}
.item:hover {
color: #a9a9a9;
}
.currentItem>a {
/*background-color: #e8f5e0;*/
width: 25px;
line-height: 25px;
/*float: left;*/
/*-webkit-border-radius: 50%;*/
/*-moz-border-radius: 50%;*/
/*border-radius: 50%;*/
color: red;
}
#foots {
width: 100%;
height: 35px;
background-color: #fff;
border-top: 1px solid #ccc;
/*margin-top: 14px;*/
}
#footNow {
float: left;
margin: 6px 0 0 5px;
color: #009ad6;
/* font-family: "微軟雅黑"; */
}
#Container {
/* overflow: hidden; */
float: left;
/*border-top: 1px solid #ccc;*/
}
#center {
width: 100%;
/* overflow: hidden; */
/*border-top: 1px solid #ccc;*/
}
#centerMain {
width: 300%;
margin-left: -100%;
/*border-top: 1px solid #ccc;*/
}
#selectYearDiv {
float: left;
background-color: #fff;
/*border-top: 1px solid #ccc;*/
}
#selectYearDiv>div {
float: left;
text-align: center;
/* font-family: "微軟雅黑"; */
font-size: 16px;
border: 1px solid #ccc;
margin-left: -1px;
margin-top: -1px;
cursor: pointer;
color: #909090;
/*border: 1px solid #ccc;*/
}
.currentYearSd, .currentMontSd {
color: #ff4400 !important;
}
#selectMonthDiv {
float: left;
background-color: #fff;
}
#selectMonthDiv>div {
color: #344c67;
float: left;
text-align: center;
/* font-family: "微軟雅黑"; */
font-size: 16px;
border: 1px solid #ccc;
margin-left: -1px;
margin-top: -1px;
cursor: pointer;
}
#selectYearDiv>div:hover, #selectMonthDiv>div:hover {
background-color: #efefef;
}
#centerCalendarMain {
float: left;
/*border-top: 1px solid #ccc;*/
}
</style>
<script type="text/javascript">
$(document).ready(function(e) {
CalendarHandler.initialize();
});
var CalendarHandler = {
currentYear: 0,
currentMonth: 0,
isRunning: false,
showYearStart:2009,
tag:0,
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").width() - 30) / 2 + "px");
//翻天數時的動畫翻頁
$("#Container").animate({
width: $("#context").width() + "px",
height: (590 - 30) * 2 + "px",
marginLeft: "0px",
marginTop: "0px"
// background-color:"red"
// border:"1px"
}, 300, function() {
$calendarItem.css("visibility", "visible");
});
//控制日期的marginleft
$(".dayItem").css("width", $(".week").width() + "px").css("marginLeft", 5 + "px").css("marginRight", 10 + "px");
//控制當前月份的高度
var itemPaddintTop =( $("#center").height() - 8)/ 6;
$(".item").css({
//減去border的長度
"width": ($(".week").width()-20 )/ 7 + "px",
"height": itemPaddintTop + "px",
// "border":"3px"
"color": "#4c637b",
"float": "left",
"text-align":" right",
"cursor": "pointer",
//"margin": 0,
"margin-left": "0px",
"font-size": "10px",
"border": "1px solid #d4d9df",
// "border-bottom": "none",
// "border-right": "none "
});
$(".currentItem>a").css("margin-left", ($(".item").width() - 25) / 2 + "px").css("margin-top", ($(".item").height() - 25) / 2 + "px");
$(".week>h3").css("width", ($(".week").width()-20 ) / 7 + "px");
this.RunningTime();
},
CreateSelectYear: function(showYearStart) {
CalendarHandler.showYearStart=showYearStart;
$(".currentDay").show();
$("#selectYearDiv").children().remove();
var yearindex = 0;
for (var i = showYearStart; i < showYearStart+12; i++) {
yearindex++;
if(i==showYearStart){
$last=$("<div>往前</div>");
$("#selectYearDiv").append($last);
$last.click(function(){
CalendarHandler.CreateSelectYear(CalendarHandler.showYearStart-10);
});
continue;
}
if(i==showYearStart+11){
$next=$("<div>日後</div>");
$("#selectYearDiv").append($next);
$next.click(function(){
CalendarHandler.CreateSelectYear(CalendarHandler.showYearStart+10);
});
continue;
}
if (i == this.currentYear) {
$yearItem=$("<div class=\"currentYearSd\" id=\"" + yearindex + "\">" + i + "</div>")
}
else{
$yearItem=$("<div id=\"" + yearindex + "\">" + i + "</div>");
}
$("#selectYearDiv").append($yearItem);
$yearItem.click(function(){
$calendarItem=CalendarHandler.CreateCalendar(Number($(this).html()),1,1);
$("#Container").append($calendarItem);
CalendarHandler.CSS()
CalendarHandler.isRunning = true;
$($("#Container").find(".dayItem")[0]).animate({
height: "0px"
}, 300, function() {
$(this).remove();
CalendarHandler.isRunning = false;
});
$("#centerMain").animate({
marginLeft: -$("#center").width() + "px"
}, 500);
});
if (yearindex == 1 || yearindex == 5 || yearindex == 9) $("#selectYearDiv").find("#" + yearindex).css("border-left-color", "none");
if (yearindex == 4 || yearindex == 8 || yearindex == 12) $("#selectYearDiv").find("#" + yearindex).css("border-right-color", "none");
}
$("#selectYearDiv>div").css("width", ($(".week").width() - 10) / 4 + "px").css("line-height", ($("#center").height() - 4) / 3 + "px");
//$("#selectYearDiv").css("marginTop", 3 + "px").css("marginBottom", 3 + "px").css("marginRight", 50 + "px");
$("#centerMain").animate({
marginLeft: "5px"
}, 300);
},
CreateSelectMonth: function() {
$(".currentDay").show();
$("#selectMonthDiv").children().remove();
for (var i = 1; i < 13; i++) {
if (i == this.currentMonth) $monthItem=$("<div class=\"currentMontSd\" id=\"" + i + "\">" + i + "月</div>");
else $monthItem=$("<div id=\"" + i + "\">" + i + "月</div>");
$("#selectMonthDiv").append($monthItem);
$monthItem.click(function(){
$calendarItem=CalendarHandler.CreateCalendar(CalendarHandler.currentYear,Number($(this).attr("id")),1);
$("#Container").append($calendarItem);
CalendarHandler.CSS()
CalendarHandler.isRunning = true;
$($("#Container").find(".dayItem")[0]).animate({
height: "0px"
}, 300, function() {
$(this).remove();
CalendarHandler.isRunning = false;
});
$("#centerMain").animate({
marginLeft: -$("#center").width() + "px"
}, 500);
});
if (i == 1 || i == 5 || i == 9) $("#selectMonthDiv").find("#" + i).css("border-left-color", "none");
if (i == 4 || i == 8 || i == 12) $("#selectMonthDiv").find("#" + i).css("border-right-color", "none");
}
$("#selectMonthDiv>div").css("width",($(".week").width() - 10) / 4 + "px").css("line-height", ($("#center").height() - 4) / 3 + "px");
//$("#selectMonthDiv").css("marginTop", 3 + "px").css("marginBottom", 3 + "px").css("marginRight", 50 + "px");
$("#centerMain").animate({
//控制月份表的marginleft
marginLeft: -($(".week").width()+40) * 2 + "px"
}, 300);
},
IsRuiYear: function(aDate) {
return (0 == aDate % 4 && (aDate % 100 != 0 || aDate % 400 == 0));
},
CalculateWeek: function(y, m, d) {
var arr = "7123456".split("");
with(document.all) {
var vYear = parseInt(y, 10);
var vMonth = parseInt(m, 10);
var vDay = parseInt(d, 10);
}
var week =arr[new Date(y,m-1,vDay).getDay()];
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 = $("<div class=\"dayItem\"></div>");
//獲取當前月份的天數
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;
// alert(nowYear);
this.currentYear = nowYear;
var nowMonth = m == 0 ? nowDate.getMonth() + 1 : m;
// alert(nowMonth);
this.currentMonth = nowMonth;
var nowDay = d == 0 ? nowDate.getDate() : d;
// alert(nowDay);
$(".selectYear").html(nowYear + "年");
$(".selectMonth").html(nowMonth + "月");
var nowDaysNub = this.CalculateMonthDays(nowMonth, nowYear);
//獲取當月第一天是星期幾
// var weekDate = new Date(nowYear+"-"+nowMonth+"-"+1);
// alert(weekDate);
// alert(weekDate.getDay());
var nowWeek = parseInt(this.CalculateWeek(nowYear, nowMonth, 1));
//alert(nowWeek);
//nowWeek=weekDate.getDay()==0?7:weekDate.getDay();
//var nowWeek=weekDate.getDay();
//獲取上個月的天數
var lastMonthDaysNub = this.CalculateMonthDays((nowMonth - 1), nowYear);
// alert(lastMonthDaysNub);
//var tian1="year"+nowYear+"month"+nowMonth+ "day"+(i + 1);
if (nowWeek != 0) {
//生成上月剩下的日期,爲了使開頭是週日(nowWeek - 1)不減一
for (var i = (lastMonthDaysNub - (nowWeek )); i < lastMonthDaysNub; i++) {
var tian1;
if(nowMonth==1){var tian1="year"+(nowYear-1)+"month"+12 + "day"+(i + 1);}
else{var tian1="year"+nowYear+"month"+(nowMonth-1) + "day"+(i + 1)};
$dayItem.append("<div class=\"item lastItem\" id=\""+tian1+"\"><a>" + (i + 1) + "</a></div>");
}
}
//生成當月的日期
//var tian=nowYear+"年"+nowMonth+"月"
for (var i = 0; i < nowDaysNub; i++) {
var tian="year"+nowYear+"month"+nowMonth+ "day"+(i + 1);
// alert(tian);
if (i == (nowDay - 1)) $dayItem.append("<div class=\"item currentItem\" id=\""+tian+"\" ><a>" + (i + 1) + "</a></div>");
// var tian=nowYear+"年"+nowMonth+"月"+(i + 1)+ "日";
else $dayItem.append("<div class=\"item\" id=\""+tian+"\" ><a>" +(i + 1) + "<div><br /></div><div><br /></div><div><br /></div><div class=\"baoma\" ><div class=\"hanzi\" >寶馬</div><div class=\"shuzi\" >22</div></a></div>");
// <div class=\"item\" ><a>" +(i + 1) + "日</a></div>
}
//獲取總共已經生成的天數
var hasCreateDaysNub = nowWeek + nowDaysNub;
//若是小於42，往下個月推算
if (hasCreateDaysNub < 42) {
//若是小於42，往下個月推算 i <= (42 - hasCreateDaysNub)改成小於
for (var i = 0; i < (42 - hasCreateDaysNub); i++) {
// var tian="year"+nowYear+"month"+(nowMonth+1) + "day"+(i + 1);
// alert(tian);
var tian2;
if(nowMonth==12){var tian2="year"+(nowYear+1)+"month"+1 + "day"+(i + 1);}
else{var tian2="year"+nowYear+"month"+(nowMonth+1) + "day"+(i + 1);};
$dayItem.append("<div class=\"item lastItem\" id=\""+tian2+"\"><a>" + (i + 1) + "</a></div>");
}
}
return $dayItem;
},
CSS: function() {
var itemPaddintTop = ( $("#center").height() - 8)/ 6;//控制以後月份的高度
$(".item").css({
"width": ($(".week").width() - 25) / 7 + "px",
"height": itemPaddintTop + "px",
"color": "#4c637b",
"float": "left",
"text-align":" right",
"cursor": "pointer",
"margin": 0,
//"font-family": "微軟雅黑",
"font-size": "13px",
"border": "1px solid #d4d9df",
// "border-bottom": "none",
// "border-right": "none "
});
$(".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 = ( $("#center").height() - 8)/ 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 h=nowDate.getHours()<10?"0"+nowDate.getHours():nowDate.getHours();
var m=nowDate.getMinutes()<10?"0"+nowDate.getMinutes():nowDate.getMinutes();
var s=nowDate.getSeconds()<10?"0"+nowDate.getSeconds():nowDate.getSeconds();
var nowTime = h + ":" + m + ":" + s;
$("#footNow").html(nowTime);
}, 1000);
}
}
</script>
</head>
<body>
<div id="Demo">
<div id="title">
<a class="selectBtn month" href="javascript:" onclick="CalendarHandler.CalculateLastMonthDays();"><</a>
<a class="selectBtn selectYear" href="javascript:" onClick="CalendarHandler.CreateSelectYear(CalendarHandler.showYearStart);">2014年</a>
<a class="selectBtn selectMonth" onClick="CalendarHandler.CreateSelectMonth()">6月</a>
<a class="selectBtn nextMonth" href="javascript:" onClick="CalendarHandler.CalculateNextMonthDays();">></a>
<a class="selectBtn currentDay" href="javascript:" onClick="CalendarHandler.CreateCurrentCalendar(0,0,0);">今天</a>
</div>
<div id="CalendarMain">
<div id="context">
<div class="week">
<h3> 日 </h3>
<h3> 一 </h3>
<h3> 二 </h3>
<h3> 三 </h3>
<h3> 四 </h3>
<h3> 五 </h3>
<h3> 六 </h3>
</div>
<div id="center">
<div id="centerMain">
<div id="selectYearDiv"></div>
<div id="centerCalendarMain">
<div id="Container"></div>
</div>
<div id="selectMonthDiv"></div>
</div>
</div>
<!-- <div id="foots"><a id="footNow">19:14:34</a></div> -->
</div>
</div>
</body>
<script type="text/javascript" src="http://www.pengyaou.com/jquery-1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
CalendarHandler.initialize();
});
var CalendarHandler = {
currentYear: 0,
currentMonth: 0,
isRunning: false,
showYearStart:2009,
tag:0,
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"
// background-color:"red"
// border:"1px"
}, 300, function() {
$calendarItem.css("visibility", "visible");
});
$(".dayItem").css("width", $("#context").width() + "px");
var itemPaddintTop = $(".dayItem").height() / 6;
$(".item").css({
"width": ($(".week").width()-20 )/ 7 + "px",
// "line-height": itemPaddintTop + "px",
"height": itemPaddintTop + "px",
// "border":"3px"
"color": "#4c637b",
"float": "left",
"text-align":" right",
"cursor": "pointer",
"margin": 0,
"font-family": "微軟雅黑",
"font-size": "13px",
"border": "1px solid #d4d9df",
// "border-bottom": "none",
// "border-right": "none "
});
$(".currentItem>a").css("margin-left", ($(".item").width() - 25) / 2 + "px").css("margin-top", ($(".item").height() - 25) / 2 + "px");
$(".week>h3").css("width", ($(".week").width()-20 ) / 7 + "px");
this.RunningTime();
},
CreateSelectYear: function(showYearStart) {
CalendarHandler.showYearStart=showYearStart;
$(".currentDay").show();
$("#selectYearDiv").children().remove();
var yearindex = 0;
for (var i = showYearStart; i < showYearStart+12; i++) {
yearindex++;
if(i==showYearStart){
$last=$("<div>往前</div>");
$("#selectYearDiv").append($last);
$last.click(function(){
CalendarHandler.CreateSelectYear(CalendarHandler.showYearStart-10);
});
continue;
}
if(i==showYearStart+11){
$next=$("<div>日後</div>");
$("#selectYearDiv").append($next);
$next.click(function(){
CalendarHandler.CreateSelectYear(CalendarHandler.showYearStart+10);
});
continue;
}
if (i == this.currentYear) {
$yearItem=$("<div class=\"currentYearSd\" id=\"" + yearindex + "\">" + i + "</div>")
}
else{
$yearItem=$("<div id=\"" + yearindex + "\">" + i + "</div>");
}
$("#selectYearDiv").append($yearItem);
$yearItem.click(function(){
$calendarItem=CalendarHandler.CreateCalendar(Number($(this).html()),1,1);
$("#Container").append($calendarItem);
CalendarHandler.CSS()
CalendarHandler.isRunning = true;
$($("#Container").find(".dayItem")[0]).animate({
height: "0px"
}, 300, function() {
$(this).remove();
CalendarHandler.isRunning = false;
});
$("#centerMain").animate({
marginLeft: -$("#center").width() + "px"
}, 500);
});
if (yearindex == 1 || yearindex == 5 || yearindex == 9) $("#selectYearDiv").find("#" + yearindex).css("border-left-color", "none");
if (yearindex == 4 || yearindex == 8 || yearindex == 12) $("#selectYearDiv").find("#" + yearindex).css("border-right-color", "none");
}
$("#selectYearDiv>div").css("width", ($("#center").width() - 40) / 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 < 13; i++) {
if (i == this.currentMonth) $monthItem=$("<div class=\"currentMontSd\" id=\"" + i + "\">" + i + "月</div>");
else $monthItem=$("<div id=\"" + i + "\">" + i + "月</div>");
$("#selectMonthDiv").append($monthItem);
$monthItem.click(function(){
$calendarItem=CalendarHandler.CreateCalendar(CalendarHandler.currentYear,Number($(this).attr("id")),1);
$("#Container").append($calendarItem);
CalendarHandler.CSS()
CalendarHandler.isRunning = true;
$($("#Container").find(".dayItem")[0]).animate({
height: "0px"
}, 300, function() {
$(this).remove();
CalendarHandler.isRunning = false;
});
$("#centerMain").animate({
marginLeft: -$("#center").width() + "px"
}, 500);
});
if (i == 1 || i == 5 || i == 9) $("#selectMonthDiv").find("#" + i).css("border-left-color", "red");
if (i == 4 || i == 8 || i == 12) $("#selectMonthDiv").find("#" + i).css("border-right-color", "red");
}
$("#selectMonthDiv>div").css("width", ($("#center").width() - 40) / 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) {
var arr = "7123456".split("");
with(document.all) {
var vYear = parseInt(y, 10);
var vMonth = parseInt(m, 10);
var vDay = parseInt(d, 10);
}
var week =arr[new Date(y,m-1,vDay).getDay()];
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 = $("<div class=\"dayItem\"></div>");
//獲取當前月份的天數
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;
// alert(nowYear);
this.currentYear = nowYear;
var nowMonth = m == 0 ? nowDate.getMonth() + 1 : m;
// alert(nowMonth);
this.currentMonth = nowMonth;
var nowDay = d == 0 ? nowDate.getDate() : d;
// alert(nowDay);
$(".selectYear").html(nowYear + "年");
$(".selectMonth").html(nowMonth + "月");
var nowDaysNub = this.CalculateMonthDays(nowMonth, nowYear);
//獲取當月第一天是星期幾
// var weekDate = new Date(nowYear+"-"+nowMonth+"-"+1);
// alert(weekDate);
// alert(weekDate.getDay());
var nowWeek = parseInt(this.CalculateWeek(nowYear, nowMonth, 1));
//alert(nowWeek);
//nowWeek=weekDate.getDay()==0?7:weekDate.getDay();
//var nowWeek=weekDate.getDay();
//獲取上個月的天數
var lastMonthDaysNub = this.CalculateMonthDays((nowMonth - 1), nowYear);
// alert(lastMonthDaysNub);
if (nowWeek != 0) {
//生成上月剩下的日期,爲了使開頭是週日(nowWeek - 1)不減一
for (var i = (lastMonthDaysNub - (nowWeek )); i < lastMonthDaysNub; i++) {
$dayItem.append("<div class=\"item lastItem\"><a>" + (i + 1) + "</a></div>");
}
}
//生成當月的日期
var tian=nowYear+"年"+nowMonth+"月"
for (var i = 0; i < nowDaysNub; i++) {
var tian="year"+nowYear+"month"+nowMonth+ "day"+(i + 1);
// alert(tian);
if (i == (nowDay - 1)) $dayItem.append("<div class=\"item currentItem\" id=\""+tian+"\" ><a>" + (i + 1) + "</a></div>");
// var tian=nowYear+"年"+nowMonth+"月"+(i + 1)+ "日";
else $dayItem.append("<div class=\"item\" id=\""+tian+"\" ><a>" +(i + 1) + "<div><br /></div><div><br /></div><div><br /></div><div class=\"baoma\" >寶馬 22</div></a></div>");
// <div class=\"item\" ><a>" +(i + 1) + "日</a></div>
}
//獲取總共已經生成的天數
var hasCreateDaysNub = nowWeek + nowDaysNub;
//若是小於42，往下個月推算
if (hasCreateDaysNub < 42) {
for (var i = 0; i <= (42 - hasCreateDaysNub); i++) {
$dayItem.append("<div class=\"item lastItem\"><a>" + (i + 1) + "</a></div>");
}
}
return $dayItem;
},
CSS: function() {
var itemPaddintTop = 585 / 6;//控制以後月份的高度
$(".item").css({
"width": ($(".week").width() - 25) / 7 + "px",
// "line-height": itemPaddintTop + "px",
"height": itemPaddintTop + "px",
// "border": "1px",
// "width": ($(".week").width()-20 )/ 7 + "px",
// "height": itemPaddintTop + "px",
// "border":"3px"
"color": "#4c637b",
"float": "left",
"text-align":" right",
"cursor": "pointer",
"margin": 0,
"font-family": "微軟雅黑",
"font-size": "13px",
"border": "1px solid #d4d9df",
// "border-bottom": "none",
// "border-right": "none "
});
$(".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 h=nowDate.getHours()<10?"0"+nowDate.getHours():nowDate.getHours();
var m=nowDate.getMinutes()<10?"0"+nowDate.getMinutes():nowDate.getMinutes();
var s=nowDate.getSeconds()<10?"0"+nowDate.getSeconds():nowDate.getSeconds();
var nowTime = h + ":" + m + ":" + s;
$("#footNow").html(nowTime);
}, 1000);
}
}
</script>
<!--[if IE 7]>
<style type="text/css">
.menuItem{ margin-left:-130px; }
</style>
<![endif]-->
</html>css
- 1. 日曆插件
- 2. Calendars - 日曆插件
- 3. fullcaledar日曆插件
- 4. javascript日曆插件
- 5. 雙日曆插件
- 6. Wijmo 日曆插件
- 7. jquery日曆插件
- 8. cocosCreator日曆插件
- 9. android日曆多選 日曆插件
- 10. 好用的日曆插件（三款常用的日曆插件）
- 更多相關文章...
- • Maven 插件 - Maven教程
- • Eclipse 安裝插件 - Eclipse 教程
- • IntelliJ IDEA安裝代碼格式化插件
- • C# 中 foreach 遍歷的用法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 日曆插件
- 2. Calendars - 日曆插件
- 3. fullcaledar日曆插件
- 4. javascript日曆插件
- 5. 雙日曆插件
- 6. Wijmo 日曆插件
- 7. jquery日曆插件
- 8. cocosCreator日曆插件
- 9. android日曆多選 日曆插件
- 10. 好用的日曆插件（三款常用的日曆插件）