.calendar {
width:300px;
height:243px;
border:1px solid #ccc;
border-radius:5px;
position:relative;
}
.calendar .head {
padding:10px 10px;
text-align:center;
position:relative;
}
.calendar .head button {
width:30px;
height:30px;
line-height:30px;
text-align:center;
background:#fff;
border:1px solid #ccc;
border-radius:3px;
}
.calendar .head button.prevbtn {
position:absolute;
left:30px;
}
.calendar .head button.nextbtn {
position:absolute;
right:30px;
}
.calendar .head select {
height:30px;
width:100px;
text-align:center;
}
.calendar .head select option {
text-align:center;
}
.calendar .datebody table {
width:100%;
}
.calendar .datebody table td {
text-align:center;
border:1px solid #ccc;
}
.calendar .new,.old {
color:#ccc;
}
.calendar .active {
background:#0BB20C;
}
.calendar .on {
background:#FF6600;
}
大家可以 根据自己样式,进行随意更改,比较简单好用,没有外部插件,不会有任何冲突,兼容性没有试过。