calendarStyle.css

#calendar{
	position: relative;
}
#calendarTitle{
	position:relative;
	width: 280px;
	height: 30px;
	line-height: 30px;
	background-color: #f00;
}
#preMonth, #nextMonth, #dateWrap{
	cursor:pointer;
	position: absolute;
	display: inline-block;
	text-align: center;
	color:#fff;
}
#preMonth{
	left:0px;
}
#nextMonth{
	right:0px;
}
#preMonth, #nextMonth{
	width:40px;
	height: 30px;
	font-weight: bolder;
	background-color: red;
	border-width: 0px;
}
#dateWrap{
	font-size: 16px;
	left: 90px;
}
#titleYear{
	width:45px;
}
#titleMonth{
	width:25px;
}
#dateWrap span{
	margin:0;
	padding:0;
	float: left;
	list-style: none;
}
#calendar table{
	position: relative;
	cursor:pointer;
	border-collapse:collapse;
}
#calendar table tr:first-child{
	font-size: 16px;
	font-family: "SimSun","Microsoft YaHei";
}
#calendar table td{
	box-sizing: border-box;
	height: 40px;
	width: 40px;
	text-align: center;
	border:1px solid #ccc;
}

/*年份选择表格样式*/
#yearTable{
	z-index:1;
	position: absolute;
	left:40px;
	top:30px;
}
#yearTable tr:nth-child(1) td{
	border:none;
	height: 10px;
}
#yearTable td{
	box-sizing:border-box;
	font-size: 12px;
	cursor: pointer;
	width: 40px;
	text-align: center;
	border: 1px solid #000;
	background-color: #ccc;
}

/*月份选择表格样式*/
#monthTable{
	z-index:1;
	position: absolute;
	left:114px;
	top:30px;
}
#monthTable td{
	box-sizing:border-box;
	font-size: 12px;
	cursor: pointer;
	width: 25px;
	text-align: center;
	border: 1px solid #000;
	background-color: #ccc;
}
#yearTable td:hover, #monthTable td:hover{
	background-color: #ff0;
}
td{
	user-select: none;
	-moz-user-select:none;
	-webkit-user-select:none;
}

/*日期选择样式表*/
.click{
	background-color: #a9cfec !important;
}

/*特定的样式*/
#calendar .hide{
	display: none;
}
#calendar .noSelect{
	cursor: default !important;
}
#calendar .noSelect:hover{
	background-color: #ccc !important;
}
#calendar .weekend{
	color:#f00;
}
#calendar .today{
	background-color: #ccc;
}