<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简洁的jQuery日历代码</title>
<style type="text/css">
body {
background-color: #efefef;
}
#CalendarMain {
width: 300px;
height: 300px;
border: 1px solid #ccc;
margin: 0 auto;
margin-top: 100px;
}
#title {
width: 100%;
height: 30px;
background-color: #b9121b;
}
.selectBtn {
font-weight: 900;
font-size: 15px;
color: #fff;
cursor: pointer;
text-decoration: none;
padding: 7px 10px 6px 10px;
}
.selectBtn:hover {
background-color: #1d953f;
}
.selectYear {
float: left;
margin-left: 50px;
position: absolute;
}
.selectMonth {
float: left;
margin-left: 120px;
position: absolute;
}
.month {
float: left;
position: absolute;
}
.nextMonth {
float: right;
}
.currentDay {
float: right;
}
#context {
background-color: #fff;
width: 100%;
}
.week {
width: 100%;
height: 30px;
}
.week>h3 {
float: left;
color: #808080;
text-align: center;
margin: 0;
padding: 0;
margin-top: 5px;
font-size: 16px;
}
.dayItem {
float: left;
}
.lastItem {
color: #d1c7b7 !important;
}
.item {
color: #333;
float: left;
text-align: center;
cursor: pointer;
margin: 0;
font-family: "微软雅黑";
font-size: 13px;
}
.item:hover {
color: #b9121b;
}
.currentItem>a {
background-color: #b9121b;
width: 25px;
line-height: 25px;
float: left;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: #fff;
}
#foots {
width: 100%;
height: 35px;
background-color: #fff;
border-top: 1px solid #ccc;
margin-top: -1px;
}
#footNow {
float: right;
margin: 6px 15px 0 0;
color: #009ad6;
font-family: "微软雅黑";
}
#Container {
overflow: hidden;
float: left;
}
#center {
width: 100%;
overflow: hidden;
}
#centerMain {
width: 300%;
margin-left: -100%;
}
#selectYearDiv {
float: left;
background-color: #fff;
}
#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;
}
.currentYearSd, .currentMontSd {
color: #ff4400 !important;
}
#selectMonthDiv {
float: left;
background-color: #fff;
}
#selectMonthDiv>div {
color: #909090;
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;
}
</style>
</head>
<body><script src="/demos/googlegg.js"></script>
<div id="Demo">
<div id="CalendarMain">
<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="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="js/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"
}, 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(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", "#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);
},
CreateSelectMo
