怎么实现一个全年日历12个月缩略图在整个页面显示？内附图片。【标题要长】_Java Web开发

如何实现一个全年日历12个月缩略图在整个页面显示？？？内附图片。。。。。。。。。【标题要长】
每个日期可以点击，日历与星期要对应上。

哪位有思路或实现方法，麻烦提供一下，感激不尽。

------解决方案--------------------
没必要自己写啊这样的日历控件多的是哦。。
------解决方案--------------------
这样的日历控件多的是，何必自己实现呢？如果只是练习的话可以考虑
------解决方案--------------------
给你推荐一款JS插件
http://dhtmlx.com/docs/products/dhtmlxScheduler/index.shtml?pl1
------解决方案--------------------
是啊，使用直接的日历控件即可。我记得当年我做的一个OA的时候，我就是用了一个日历控件，具体名字忘记了。楼主可以搜下。
但是楼主要考虑浏览器的兼容问题。
------解决方案--------------------

探讨
那个dhx貌似可以试试
不知老兄有没有中文说明文档

------解决方案--------------------
有很多很好的实用的日期选择器控件
------解决方案--------------------
en 这个地址就是楼主要的
http://dhtmlx.com/docs/products/dhtmlxScheduler/sample_basic.html
------解决方案--------------------

探讨
en 这个地址就是楼主要的
http://dhtmlx.com/docs/products/dhtmlxScheduler/sample_basic.html

------解决方案--------------------

JScript code

......scheduler.setLoadMode("year");......
------解决方案--------------------
上网搜一下吧！网上很多
------解决方案--------------------
是呀这个自已写太累了，网上有好多现成的
------解决方案--------------------
红的那个是什么意思？
------解决方案--------------------
Java code<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">html,body{ font-size:12px; font-family:"Courier New", Courier, monospace; margin:0px; padding:0px;}#calendar{margin:50px;width:150px;font-size:12px;}#calendar table{ border-collapse:collapse;}#calendar table td{ height:20px; width:20px; border:1px solid #ff6600; text-align:center;}#calendar .calendarTitle table .threetd{ width:62px;}#calendar .calendarTitle table .twotd{ width:41px;}#calendar .calendarTitle table td{ border-bottom:0px;}.classOver{ background:#000000; color:#FFFFFF;}.yearContainer{background:#ffffff;border:1px solid #ff6600;position:absolute;width:62px;}.yearContainer ul{list-style:none;margin:0px;padding:0px;}.yearContainer ul li{height:18px;line-height:18px;display:block;text-align:center;}.monthContainer{background:#ffffff;border:1px solid #ff6600;position:absolute;width:41px;}.monthContainer ul{list-style:none;margin:0px;padding:0px;}.monthContainer ul li{height:18px;line-height:18px;display:block;text-align:center;}a{ text-decoration:none; color:#990000;}</style></head><body><script type="text/javascript"> var titleTable="<div id=\"calendar\"><div class=\"calendarTitle\">"; titleTable+="<table width=\"0%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr><td>"; titleTable+="<a href=\"javascript:void(0)\" onclick=\"SloppyJs.calendar.getNewTime('b')\"  onfocus=\"this.blur()\" title='上月'><</a></td>"; titleTable+="<td class=\"threetd\" id=\"currentYear\" onclick=\"SloppyJs.calendar.writeDivString('currentYear','yeartype')\"> </td>"; titleTable+="<td class=\"twotd\" id=\"currentMonth\" onclick=\"SloppyJs.calendar.writeDivString('currentMonth','monthtype')\"> </td>"; titleTable+="<td><a href=\"javascript:void(0)\" onclick=\"SloppyJs.calendar.getNewTime('n')\" onfocus=\"this.blur()\" title='下月'>></a></td></tr></table></div>"; var SloppyJs={}; (function(){  SloppyJs.calendar={   getDateString:function(y,m){    var DayArray=[];    for(var i=0;i<42;i++) DayArray[i]=" ";    for(var i=0;i<new Date(y,m,0).getDate();i++)DayArray[i+new Date(y,m-1,1).getDay()]=i+1;    return DayArray;   },   getConString:function(y,m){    var DStr="<table width=\"0%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr>";    var DateArray=['日','一','二','三','四','五','六'];    for(var i=0;i<7;i++){     DStr+="<td>"+DateArray[i]+"</td>";    }    DStr+="</tr>";    for(var i=0;i<6;i++){     DStr+="<tr>";     for(var j=0;j<7;j++){      var CS=new Date().getDate()==this.getDateString(y,m)[i*7+j]?"classOver":"";      if(this.getDateString(y,m)[i*7+j]==" "){       DStr+="<td class='"+CS+"' id='dateNum"+(i*7+j)+"'onclick=\"SloppyJs.calendar.alertClick(event)\" >"+this.getDateString(y,m)[i*7+j]+"</td>";      }else{       DStr+="<td class='"+CS+"' id='dateNum"+(i*7+j)+"' onclick=\"SloppyJs.calendar.alertClick(event)\">"+this.getDateString(y,m)[i*7+j]+"</td>";      }     }     DStr+="</tr>";    }    DStr+="</table>";    return DStr;   },   rewriteConString:function(y,m){    var TArray=this.getDateString(y,m);    var len=TArray.length;    for(var i=0;i<len;i++){     document.getElementById('dateNum'+i).innerHTML=TArray[i];     document.getElementById('dateNum'+i).className="";     if(new Date().getYear()==y&&new Date().getMonth()+1==m&&new Date().getDate()==TArray[i]){      document.getElementById('dateNum'+i).className="classOver";                 }    }   },   getNewTime:function(action){    var YearNO=document.getElementById('currentYear').innerHTML;    var MonthNO=document.getElementById('currentMonth').innerHTML;    if(action=="b"){     if(MonthNO=="1"){      MonthNO=13;      YearNO=YearNO-1;      }     document.getElementById('currentMonth').innerHTML=MonthNO-1;     document.getElementById('currentYear').innerHTML=YearNO;     this.rewriteConString(YearNO,MonthNO-1);    }    if(action=="n"){     if(MonthNO=="12"){      MonthNO=0;      YearNO=YearNO-(-1);      }     document.getElementById('currentYear').innerHTML=YearNO;     document.getElementById('currentMonth').innerHTML=MonthNO-(-1);     this.rewriteConString(YearNO,MonthNO-(-1));    }   },   writeDivString:function(){    var _element=document.getElementById(arguments[0]);    _element.style.position="relative";    var _value=_element.innerHTML;    //year    if(arguments[1]=="yeartype"){     var _containerid="yeardiv";     if(document.getElementById(_containerid)){      var _c=document.getElementById(_containerid);      document.body.removeChild(_c);     }     if(document.getElementById("monthdiv")){      var _cc=document.getElementById("monthdiv");      document.body.removeChild(_cc);     }     var _container=document.createElement("div");     _container.setAttribute("id",_containerid);     _container.className="yearContainer";     var _ul=document.createElement("ul");     for(var i=0;i<15;i++){      var _li=document.createElement("li");      var _text=document.createTextNode(_value-7+i);      _li.appendChild(_text);      _ul.appendChild(_li);     }     _container.appendChild(_ul);     _container.style.top=_element.offsetTop+20+"px";     _container.style.left=_element.offsetLeft+"px";     document.body.appendChild(_container);     var _ali=document.getElementById(_containerid).getElementsByTagName("li");     for(var j=0;j<_ali.length;j++){      _ali[j].onmouseover=function(){       this.style.background="#ff0000";       this.style.color="#FFFFFF";       this.style.cursor="pointer";      };      _ali[j].onmouseout=function(){       this.style.background="#ffffff";       this.style.color="#000000";      };      _ali[j].onclick=function(){       document.getElementById("yeardiv").style.display="none";       _element.innerHTML=this.innerHTML;       var _alii=document.getElementById(_containerid).getElementsByTagName("li");       for(var k=0;k<_alii.length;k++){        _ul.removeChild(_alii[k]);       }       _container.removeChild(_ul);       document.body.removeChild(_container);       _element.style.position="";       var _y=document.getElementById('currentYear').innerHTML;       var _m=document.getElementById('currentMonth').innerHTML;       SloppyJs.calendar.rewriteConString(_y,_m);      };     }     _container.onmouseout=function(){      this.style.display="none";      _element.style.position="";     };     _container.onmouseover=function(){      this.style.display="";     };    }    //month    if(arguments[1]=="monthtype"){     var _containerid="monthdiv";     if(document.getElementById(_containerid)){      var _c=document.getElementById(_containerid);      document.body.removeChild(_c);     }     if(document.getElementById("yeardiv")){      var _cc=document.getElementById("yeardiv");      document.body.removeChild(_cc);     }     var _container=document.createElement("div");     _container.setAttribute("id",_containerid);     _container.className="monthContainer";     var _ul=document.createElement("ul");     for(var i=0;i<12;i++){      var _li=document.createElement("li");      var _text=document.createTextNode(i+1);      _li.appendChild(_text);      _ul.appendChild(_li);     }     _container.appendChild(_ul);     _container.style.top=_element.offsetTop+20+"px";     _container.style.left=_element.offsetLeft+"px";     document.body.appendChild(_container);     var _ali=document.getElementById(_containerid).getElementsByTagName("li");     for(var l=0;l<_ali.length;l++){      _ali[l].onmouseover=function(){       this.style.background="#ff0000";       this.style.color="#FFFFFF";       this.style.cursor="pointer";      };      _ali[l].onmouseout=function(){       this.style.background="#ffffff";       this.style.color="#000000";      };      _ali[l].onclick=function(){       document.getElementById(_containerid).style.display="none";       _element.innerHTML=this.innerHTML;       var _alii=document.getElementById(_containerid).getElementsByTagName("li");       for(var k=0;k<_alii.length;k++){        _ul.removeChild(_alii[k]);       }       _container.removeChild(_ul);       document.body.removeChild(_container);       _element.style.position="";       var _y=document.getElementById('currentYear').innerHTML;       var _m=document.getElementById('currentMonth').innerHTML;       SloppyJs.calendar.rewriteConString(_y,_m);      };     }     _container.onmouseout=function(){      this.style.display="none";      _element.style.position="";     };     _container.onmouseover=function(){      this.style.display="";     };    }   },   alertClick:function(e){    var e=e||event;    var targets=e.target||event.srcElement;    alert(targets.innerHTML);   }  }; })(); function writeCalendar(){  document.write(titleTable);  var _todayYear=document.getElementById('currentYear').innerHTML=new Date().getFullYear();  var _todayMonth=document.getElementById('currentMonth').innerHTML=new Date().getMonth()+1;  var _calendarStr=SloppyJs.calendar.getConString(_todayYear,_todayMonth);  document.write(_calendarStr+"</div>"); }; writeCalendar();</script></body></html>