日历控件,完全用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 = 0breakcase 'Feb':monthStr = 1breakcase 'Mar':monthStr = 2breakcase 'Apr':monthStr = 3breakcase 'May':monthStr = 4breakcase 'Jun':monthStr = 5breakcase 'Jul':monthStr = 6breakcase 'Aug':monthStr = 7breakcase 'Sep':monthStr = 8breakcase 'Oct':monthStr = 9breakcase 'Nov':monthStr = 10breakcase 'Dec':monthStr = 11break}return monthStr;}function mapMonth(month){var monthStr = new Object();switch (month){case 0:monthStr = 'Jan'breakcase 1:monthStr = 'Feb'breakcase 2:monthStr = 'Mar'breakcase 3:monthStr = 'Apr'breakcase 4:monthStr = 'May'breakcase 5:monthStr = 'Jun'breakcase 6:monthStr = 'Jul'breakcase 7:monthStr = 'Aug'breakcase 8:monthStr = 'Sep'breakcase 9:monthStr = 'Oct'breakcase 10:monthStr = 'Nov'breakcase 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>