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

2012-01-18
如何实现一个全年日历12个月缩略图在整个页面显示？？？内附图片。。。。。。。。。【标题要长】每个日期可以点击，日历与
如何实现一个全年日历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> 
 
[解决办法]
两个帖子都贴了
给分啊
[解决办法]
探讨
en 这个地址就是楼主要的
http://dhtmlx.com/docs/products/dhtmlxScheduler/sample_basic.html

[解决办法]
<Script LANGUAGE="JavaScript">
  var months = new Array("一", "二", "三","四", "五", "六", "七", "八", "九","十", "十一", "十二");
  var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31,30, 31, 30, 31);
  var days = new Array("日","一", "二", "三","四", "五", "六");
  var classTemp;
  var today=new getToday();
  var year=today.year;
  var month=today.month;
  var newCal;  

  function getDays(month, year) {
 if (1 == month) return ((0 == year % 4) && (0 != (year % 100))) ||(0 == year % 400) ? 29 : 28;
 else return daysInMonth[month];
  }

  function getToday() {
 this.now = new Date();
 this.year = this.now.getFullYear();
 this.month = this.now.getMonth();
 this.day = this.now.getDate();
  }

  function Calendar() {
 newCal = new Date(year,month,1);
 today = new getToday();  
 var day = -1;
 var startDay = newCal.getDay();
 var endDay=getDays(newCal.getMonth(), newCal.getFullYear());
 var daily = 0;
 if ((today.year == newCal.getFullYear()) &&(today.month == newCal.getMonth()))
 {
  day = today.day;
 }
 var caltable = document.all.caltable.tBodies.calendar;
 var intDaysInMonth =getDays(newCal.getMonth(), newCal.getFullYear());

 for (var intWeek = 0; intWeek < caltable.rows.length;intWeek++)
  for (var intDay = 0;intDay < caltable.rows[intWeek].cells.length;intDay++)
  {
   var cell = caltable.rows[intWeek].cells[intDay];
   var montemp=(newCal.getMonth()+1)<10?("0"+(newCal.getMonth()+1)):(newCal.getMonth()+1);        
   if ((intDay == startDay) && (0 == daily)){ daily = 1;}
   var daytemp=daily<10?("0"+daily):(daily);
   var d="<"+newCal.getFullYear()+"-"+montemp+"-"+daytemp+">";
   if(day==daily) cell.className="DayNow";
   else if(intDay==6) cell.className = "DaySat";
   else if (intDay==0) cell.className ="DaySun";
   else cell.className="Day";
   if ((daily > 0) && (daily <= intDaysInMonth))
   {
    cell.innerText = daily;
    daily++;
   } else
   {
    cell.className="CalendarTD";
    cell.innerText = "";
   }
 }
 document.all.year.value=year;
 document.all.month.value=month+1;
  }

  function subMonth()
  {
 if ((month-1)<0)
 {
  month=11;
  year=year-1;
 } else
 {
  month=month-1;
 }
 Calendar();
  }

  function addMonth()
  {
 if((month+1)>11)
 {
  month=0;
  year=year+1;
 } else
 {
  month=month+1;
 }
 Calendar();
  }

  function setDate()  
  {
 if (document.all.month.value<1||document.all.month.value>12)
 {
  alert("月的有效范围在1-12之间!");
  return;
 }
 year=Math.ceil(document.all.year.value);
 month=Math.ceil(document.all.month.value-1);
 Calendar();
  }
</Script>

<Script>
function buttonOver()
{
  var obj = window.event.srcElement; 
 
  obj.runtimeStyle.cssText = "background-color:#FFFFFF";
// obj.className="Hover";
}

function buttonOut()
{
  var obj = window.event.srcElement;
  window.setTimeout(function(){obj.runtimeStyle.cssText = "";},300);
}
</Script>

<Style>
Input {font-family: verdana;font-size: 9pt;text-decoration: none;background-color: #FFFFFF;height: 20px;border: 1px solid #666666;color:#000000;}

.Calendar {font-family: verdana;text-decoration: none;width: 170;background-color: #C0D0E8;font-size: 9pt;border:0px dotted #1C6FA5;}
.CalendarTD {font-family: verdana;font-size: 7pt;color: #000000;background-color:#f6f6f6;height: 20px;width:11%;text-align: center;}

.Title {font-family: verdana;font-size: 11pt;font-weight: normal;height: 24px;text-align: center;color: #333333;text-decoration: none;background-color: #A4B9D7;border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-bottom-style:1px;border-top-color: #999999;border-right-color: #999999;border-bottom-color: #999999;border-left-color: #999999;}

.Day {font-family: verdana;font-size: 7pt;color:#243F65;background-color: #E5E9F2;height: 20px;width:11%;text-align: center;}
.DaySat {font-family: verdana;font-size: 7pt;color:#FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px;width: 12%;}
.DaySun {font-family: verdana;font-size: 7pt;color: #FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px;width: 12%;}
.DayNow {font-family: verdana;font-size: 7pt;font-weight: bold;color: #000000;background-color: #FFFFFF;height: 20px;text-align: center;}

.DayTitle {font-family: verdana;font-size: 9pt;color: #000000;background-color: #C0D0E8;height: 20px;width:11%;text-align: center;}
.DaySatTitle {font-family: verdana;font-size: 9pt;color:#FF0000;text-decoration: none;background-color:#C0D0E8;text-align: center;height: 20px;width: 12%;}
.DaySunTitle {font-family: verdana;font-size: 9pt;color: #FF0000;text-decoration: none;background-color: #C0D0E8;text-align: center;height: 20px;width: 12%;}

.DayButton {font-family: Webdings;font-size: 9pt;font-weight: bold;color: #243F65;cursor:hand;text-decoration: none;}

</Style>


<table border="0" cellpadding="0" cellspacing="1" class="Calendar" id="caltable">
<thead>
    <tr align="center" valign="middle">  
 <td colspan="7" class="Title">
  <a href="javaScript:subMonth();" title="上一月" Class="DayButton">3</a> <input name="year" type="text" size="4" maxlength="4" onKeyDown="if (event.keyCode==13)" onKeyUp="this.value=this.value.replace(/[^0-9]/g,'')"  onpaste="this.value=this.value.replace(/[^0-9]/g,'')"> 年 <input name="month" type="text" size="1" maxlength="2" onKeyDown="if (event.keyCode==13)" onKeyUp="this.value=this.value.replace(/[^0-9]/g,'')"  onpaste="this.value=this.value.replace(/[^0-9]/g,'')"> 月 <a href="JavaScript:addMonth();" title="下一月" Class="DayButton">4</a>
 </td>
  </tr>
  <tr align="center" valign="middle">  
 <Script LANGUAGE="JavaScript"> 
  document.write("<TD class=DaySunTitle id=diary >" + days[0] + "</TD>");  
  for (var intLoop = 1; intLoop < days.length-1;intLoop++)  
   document.write("<TD class=DayTitle id=diary>" + days[intLoop] + "</TD>");  
   document.write("<TD class=DaySatTitle id=diary>" + days[intLoop] + "</TD>");   
 
 </Script>
  </TR>  
</thead>
<TBODY border=1 cellspacing="0" cellpadding="0" ID="calendar" ALIGN=CENTER ONCLICK="getDiary()">
  <Script LANGUAGE="JavaScript">
 for (var intWeeks = 0; intWeeks < 6; intWeeks++)
 {
  document.write("<TR style='cursor:hand'>");
  for (var intDays = 0; intDays < days.length;intDays++) document.write("<TD class=CalendarTD onMouseover='buttonOver();' onMouseOut='buttonOut();'></TD>");
  document.write("</TR>");
 }  
  </Script>
</TBODY>
</TABLE>
<Script  LANGUAGE="JavaScript">
  Calendar();
</Script>
<p>查找更多代码，请访问：<a href="http://www.lanrentuku.com" target="_blank">懒人图库</a></p>
热点排行
Java Web开发

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