日历控件,完全用CSS+JS实现
转的.
<html>
<head>
<style>
.body{
background-color:white;
}
.calendar table{
width:100%;
height:100%;
position:relative;
border-collapse:collapse;
}
.calendar table th.first{
height:25px;
background-color:maroon;
font-family: arial, helvetica;
font-size:15px;
color:white;
border-right:1px solid white;
border-left:1px solid maroon;
}
.calendar table th.mid{
height:25px;
background-color:maroon;
font-family: arial, helvetica;
font-size:15px;
color:white;
border-right:1px solid white;a
}
.calendar table th.last{
height:25px;
background-color:maroon;
font-family: arial, helvetica;
font-size:15px;
color:white;
border-right:1px solid maroon;
}
.calendar table td {
width:14%;
border:1px solid maroon;
padding:0px;
}
.calendar table.tdborder{
width:100%;
height:100%;
position:relative;
}
.calendar table td.tdborderNormal{
border:1px solid transparent;
width:100%;
height:100%;
position:relative;
padding:0px;
}
.calendar table td.tdborderOnfocus {
border:1px solid red;
width:100%;
height:100%;
position:relative;
padding:0px;
}
.calendar table td.caltitle_p {
height:25px;
font-family: arial, helvetica;
font-size:20px;
color:maroon;
border:0px;
text-align:center;
cursor:pointer;
}
.calendar table td.caltitle_m {
height:25px;
font-family: arial, helvetica;
font-size:20px;
color:maroon;
border:0px;
text-align:center;
}
.calendar table td.caltitle_m_lr {
height:25px;
font-family: arial, helvetica;
font-size:11px;
color:maroon;
border:0px;
text-align:left;
cursor:pointer;
}
.calendar table td.caltitle_l {
height:25px;
font-family: arial, helvetica;
font-size:20px;
color:maroon;
border:0px;
text-align:center;
cursor:pointer;
}
.calendar table td.quarter {
height:25px;
font-family: arial, helvetica;
font-size:14px;
color:maroon;
border:0px;
text-align:center;
}
.calendar table td.quartermonth {
height:25px;
font-family: arial, helvetica;
font-size:12px;
color:maroon;
border:0px;
text-align:center;
cursor:pointer;
}
.calendar div.dateTitle{
width:98%;
height:15px;
position:relative;
font-family: arial, helvetica;
font-size:13px;
text-align:right;
}
.calendar div.dateContext{
width:100%;
height:90%;
position:relative;
font-family: arial, helvetica;
font-size:12px;
text-align:left;
position:relative;
border-top:1px dashed maroon;
}
.calendar tabel td.now{
font-family: arial, helvetica;
font-size:11px;
cursor:hand;
position:relative;
}
</style>
<script>
var currentDate = new Date();
Date.prototype.getMonthDays = function(month,year){
var nextMonthFiristDay = new Date();
nextMonthFiristDay.setDate('1');
var nowMonthFiristDay = new Date();
nowMonthFiristDay.setDate('1');
if(year){
nowMonthFiristDay.setFullYear(year);
nextMonthFiristDay.setFullYear(year);
}
if(month){
nextMonthFiristDay.setMonth(month);
nowMonthFiristDay.setMonth(month-1);
}else{
nextMonthFiristDay.setMonth(nextMonthFiristDay.getMonth()+1);
}
return Number((nextMonthFiristDay - nowMonthFiristDay)/1000/60/60/24).toFixed(0);
}
Date.prototype.getFirstDayOfMonthInWeek = function(month,year){
var today = new Date();
today.setDate('1');
if(year){
today.setFullYear(year);
}
if(month){
today.setMonth(month-1);
}
return today.getDay();
}
function addRow(tbody,strings,ishead){
var tds = new Array();
var texts = new Array();
var _tr = document.createElement("tr");
tbody.appendChild(_tr);
for(var i=0;i<7;i++){
if(ishead){
tds[i] = document.createElement("th");
if(i==0){
tds[i].className = 'first';
}else if(i==6){
tds[i].className = 'last';
}else{
tds[i].className = 'mid';
}
}else{
tds[i] = document.createElement("td");
}
_tr.appendChild(tds[i]);
if(strings){
texts[i] = document.createTextNode(strings[i]);
tds[i].appendChild(texts[i]);
}
}
}
function mapMonthNum(month){
var monthStr = new Number();
switch (month)
{
case 'Jan':
monthStr = 0
break
case 'Feb':
monthStr = 1
break
case 'Mar':
monthStr = 2
break
case 'Apr':
monthStr = 3
break
case 'May':
monthStr = 4
break
case 'Jun':
monthStr = 5
break
case 'Jul':
monthStr = 6
break
case 'Aug':
monthStr = 7
break
case 'Sep':
monthStr = 8
break
case 'Oct':
monthStr = 9
break
case 'Nov':
monthStr = 10
break
case 'Dec':
monthStr = 11
break
}
return monthStr;
}
function mapMonth(month){
var monthStr = new Object();
switch (month)
{
case 0:
monthStr = 'Jan'
break
case 1:
monthStr = 'Feb'
break
case 2:
monthStr = 'Mar'
break
case 3:
monthStr = 'Apr'
break
case 4:
monthStr = 'May'
break
case 5:
monthStr = 'Jun'
break
case 6:
monthStr = 'Jul'
break
case 7:
monthStr = 'Aug'
break
case 8:
monthStr = 'Sep'
break
case 9:
monthStr = 'Oct'
break
case 10:
monthStr = 'Nov'
break
case 11:
monthStr = 'Dec'
break
}
return monthStr;
}
function addTitleMonth(td,strings,calendar,calendar_context){
var quarter1table = document.createElement("table");
var quarter1tbody = document.createElement("tbody");
var quarter1tr = document.createElement("tr");
td.appendChild(quarter1table);
quarter1table.appendChild(quarter1tbody);
quarter1tbody.appendChild(quarter1tr);
var quarter1tds = new Array();
for(var i=0;i<strings.length;i++){
quarter1tds[i] = document.createElement("td");
quarter1tds[i].monthvalue = mapMonthNum(strings[i]);
quarter1tds[i].appendChild(document.createTextNode(strings[i]));
quarter1tr.appendChild(quarter1tds[i]);
quarter1tds[i].className = 'quartermonth';
quarter1tds[i].onclick = function(){
currentDate.setMonth(this.monthvalue);
calendar.removeChild(calendar_context);
initCal();
}
}
}
function initCal(){
var calendar = document.getElementById("calendar");
var calendar_context = document.createElement("table");
calendar.appendChild(calendar_context);
var _tbody = document.createElement("tbody");
calendar_context.appendChild(_tbody);
var days = currentDate.getMonthDays(currentDate.getMonth()+1,currentDate.getFullYear());
var cells = new Array();
var cellDivs = new Array();
var cellDivTbodys = new Array();
var cellDivTrs = new Array();
var cellDivTds = new Array();
var handleDates = new Array();
var txtNodes = new Array();
//create table;
var calendar_title_tr = document.createElement("tr");
var calendar_title_td_p = document.createElement("td");
calendar_title_td_p.className = 'caltitle_p';
calendar_title_td_p.appendChild(document.createTextNode("<"));
calendar_title_td_p.onclick=function(){
currentDate.setMonth(currentDate.getMonth()-1);
calendar.removeChild(calendar_context);
initCal();
}
var calendar_title_td_m = document.createElement("td");
calendar_title_td_m.className = 'caltitle_m';
var calendar_title_td_m_table = document.createElement("table");
var calendar_title_td_m_tbody = document.createElement("tbody");
var calendar_title_td_m_tr = document.createElement("tr");
var calendar_title_td_m_tdl = document.createElement("td");
var calendar_title_td_m_tdm = document.createElement("td");
var calendar_title_td_m_tdr = document.createElement("td");
calendar_title_td_m.appendChild(calendar_title_td_m_table);
calendar_title_td_m_table.appendChild(calendar_title_td_m_tbody);
calendar_title_td_m_tbody.appendChild(calendar_title_td_m_tr);
calendar_title_td_m_tr.appendChild(calendar_title_td_m_tdl);
calendar_title_td_m_tr.appendChild(calendar_title_td_m_tdm);
calendar_title_td_m_tr.appendChild(calendar_title_td_m_tdr);
calendar_title_td_m_tdm.className = 'caltitle_m';
calendar_title_td_m_tdl.className = 'caltitle_m';
calendar_title_td_m_tdr.className = 'caltitle_m_lr';
calendar_title_td_m_tdm.appendChild(document.createTextNode(mapMonth(currentDate.getMonth()) + ',' + currentDate.getFullYear()));
var txtNow = document.createTextNode('[Now]');
calendar_title_td_m_tdr.appendChild(txtNow);
calendar_title_td_m_tdr.onclick=function(){
currentDate = new Date();
calendar.removeChild(calendar_context);
initCal();
}
if(currentDate.getFullYear() == new Date().getFullYear() && currentDate.getMonth() == new Date().getMonth()){
if(txtNow){
calendar_title_td_m_tdr.removeChild(txtNow);
}
}
var calendar_title_td_l = document.createElement("td");
calendar_title_td_l.className = 'caltitle_l';
calendar_title_td_l.appendChild(document.createTextNode(">"));
calendar_title_td_l.onclick=function(){
currentDate.setMonth(currentDate.getMonth()+1);
calendar.removeChild(calendar_context);
initCal();
}
calendar_title_tr.appendChild(calendar_title_td_p);
var quarter1 = document.createElement("td");
quarter1.className = 'quarter';
var quarter2 = document.createElement("td");
quarter2.className = 'quarter';
calendar_title_tr.appendChild(quarter1);
var monthTitles1 = ['Jan','Feb','Mar'];
addTitleMonth(quarter1,monthTitles1,calendar,calendar_context);
calendar_title_tr.appendChild(quarter2);
var monthTitles2 = ['Apr','May','Jun'];
addTitleMonth(quarter2,monthTitles2,calendar,calendar_context);
calendar_title_tr.appendChild(calendar_title_td_m);
var quarter3 = document.createElement("td");
quarter3.className = 'quarter';
var quarter4 = document.createElement("td");
quarter4.className = 'quarter';
calendar_title_tr.appendChild(quarter3);
var monthTitles3 = ['Jul','Aug','Sep'];
addTitleMonth(quarter3,monthTitles3,calendar,calendar_context);
calendar_title_tr.appendChild(quarter4);
var monthTitles4 = ['Oct','Nov','Dec'];
addTitleMonth(quarter4,monthTitles4,calendar,calendar_context);
calendar_title_tr.appendChild(calendar_title_td_l);
_tbody.appendChild(calendar_title_tr);
//create title;
var calTitles = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
addRow(_tbody,calTitles,true);
//create first row;
addRow(_tbody);
var startPoint = [2,currentDate.getFirstDayOfMonthInWeek(currentDate.getMonth()+1,currentDate.getFullYear())];
var contextDates = new Array();
for(var i=0;i<days;i++){
//alert("rows:" + startPoint[0] + ", cells:" + startPoint[1]);
cells[i] = calendar_context.rows[startPoint[0]].cells[startPoint[1]];
cellDivs[i] = document.createElement("table");
cellDivs[i].className='tdborder';
cellDivTbodys[i] = document.createElement("tbody");
cellDivs[i].appendChild(cellDivTbodys[i]);
cellDivTrs[i] = document.createElement("tr");
cellDivTbodys[i].appendChild(cellDivTrs[i]);
cellDivTds[i] = document.createElement("td");
cellDivTds[i].className='tdborderNormal';
cellDivTrs[i].appendChild(cellDivTds[i]);
cellDivTds[i].onmouseover = function(){
this.className = 'tdborderOnfocus';
}
cellDivTds[i].onmouseout = function(){
this.className = 'tdborderNormal';
}
cells[i].appendChild(cellDivs[i]);
handleDates[i] = document.createElement("div");
handleDates[i].className='dateTitle';
contextDates[i] = document.createElement("div");
contextDates[i].className='dateContext';
cellDivTds[i].appendChild(handleDates[i]);
cellDivTds[i].appendChild(contextDates[i]);
txtNodes[i] = document.createTextNode(i+1);
handleDates[i].appendChild(txtNodes[i]);
var cellsPoint = startPoint[1]++;
if(cellsPoint == 6){
startPoint[0]++;
startPoint[1]=0;
if(i != days-1){
addRow(_tbody);
}
}
}
}
window.onload = function(){
initCal();
}
</script>
</head>
<body>
<div id='calendar' class='calendar'/>
</body>
</html>