自己写的一个日历年月日的js类

在数据加载上感觉还有不足，要将数据实现load进dategrid对象中 再刷新界面才能完成一整个动作。如果能设计成ext那样用proxy的方式就可以让dategrid对象自行加载数据了，可是没有看过ext的源码，以后补进吧

/**********************日历年月日*******/ * @author cola.machine qq:371452875 mail:zzw1986@gmail.com * @param data * @returns /**************************************/ DateGrid =function(data) { //常量 this.reader=data.reader; this.porxy=data.proxy; this.weekName=['周日','周一','周二','周三','周四','周五','周六']; this.headerClass=''; this.operator=data.operator; this.td_οnclick=''; this.tableClass='datetab'; this.preMonthClass='last'; this.divClass='con'; this.nextMothClass='last'; this.todayClass='tdcon'; this.div_eventbar_class='poprcap clearall'; this.event_timeClass='#de0303'; this.selectDayClass=''; this.overClass=''; this.start_time='8:00'; this.end_time='18:00'; this.offset_time=60; //变量 this.eventItem=[]; this.style='week';//默认 this.secttime=[]; this.startday=''; this.endday=''; this.virtualDay=new Date(); this.today=new Date(); this.father=null; }; /***********************************action******************************************/ DateGrid.prototype.toMonthView=function(){ this.style='month'; this.repaint(); }; DateGrid.prototype.toWeekView=function(){ this.style='week'; this.repaint(); }; DateGrid.prototype.toDayView=function(){ this.style='day'; this.repaint(); }; DateGrid.prototype.render=function (domid){ this.father=document.getElementById(domid); this.repaint(); }; DateGrid.prototype.clearAllEventsInTable=function(){ //重新架构 this.eventItem={}; var table =null; if(this.style=='month'){ table=this.getMonthTable(); }else if(this.style=='week'){ table=this.getWeekTable(); }else if(this.style=='day'){ table=this.getDayTable(); } this.father.innerHTML=''; this.father.appendChild(table); }; DateGrid.prototype.load=function(data){ //先把原来的数据清空 this.clearAllEventsInTable(); this.eventItem=data; for(var i=0;i<data.length;i++){ var id=''+data[i][this.reader.id]; var title=data[i][this.reader.title]; var date=data[i][this.reader.date]; var time=data[i][this.reader.time]; var temp_date =new Date(); temp_date.setYear(parseInt(date.split("-")[0])); temp_date.setMonth(parseInt(date.split("-")[1]-1)); temp_date.setDate(parseInt(date.split("-")[2])); if(document.getElementById(id)){ continue;//如果已经加载了就不加载了; } if(this.style!='month') var td_id=this.getId(date,time); if(document.getElementById(td_id)){ document.getElementById(td_id).appendChild(this.getEventDiv(data[i])); } else{ //创建一个span if(document.getElementById(this.formatDate(temp_date))){ document.getElementById(this.formatDate(temp_date)).appendChild(this.getEventDiv(data[i])); /* var span=document.createElement("SPAN"); var font=document.createElement("FONT"); font.className=this.event_timeClass; font.innerHTML=time; span.innerHTML=title; span.appendChild(font); document.getElementById('div_'+this.formatDate(temp_date)).appendChild(span);*/ } } } }; DateGrid.prototype.goPre=function (){ if(this.style=='month'){ this.virtualDay.setMonth(this.virtualDay.getMonth()-1); }else if(this.style=='week'){ this.virtualDay.setDate(this.virtualDay.getDate()-7); }else if(this.style=='day'){ this.virtualDay.setDate(this.virtualDay.getDate()-1); } this.repaint(); }; DateGrid.prototype.goNext=function (){ if(this.style=='month'){ this.virtualDay.setMonth(this.virtualDay.getMonth()+1); }else if(this.style=='week'){ this.virtualDay.setDate(this.virtualDay.getDate()+7); }else if(this.style=='day'){ this.virtualDay.setDate(this.virtualDay.getDate()+1); } this.repaint(); }; /***********************************view******************************************/ DateGrid.prototype.getEventDiv=function (eventData){ var id=eventData[this.reader.id]; var title=eventData[this.reader.title]; var date=eventData[this.reader.date]; var time=eventData[this.reader.time]; var div_eventbar=document.createElement("div"); div_eventbar.οnmοuseοut=function(){ document.getElementById(id).style.display='none'; }; div_eventbar.οnmοusemοve=function(){ document.getElementById(id).style.display=''; }; div_eventbar.className=this.div_eventbar_class; var label_title=document.createElement("label"); if(title.length>10) title=title.substr(0,10)+'...'; label_title.innerHTML=title; div_eventbar.appendChild(label_title); var div= document.createElement("div"); div_eventbar.appendChild(div); div.style.display='none'; div.id=id; div.className='popLayer'; div.οnmοusemοve=function(){document.getElementById(id).style.display='';}; div.οnmοuseοut=function(){document.getElementById(id).style.display='none';}; var div3=document.createElement("div"); div.appendChild(div3); div3.className='popcon'; var span_time=document.createElement("span"); span_time.innerHTML=time; var span_title=document.createElement("span"); span_title.innerHTML=title; span_title.className='poptit'; div3.appendChild(span_time); div3.appendChild(span_title); var div_button =document.createElement("div"); div3.appendChild(div_button); div_button.className='but_pop'; if(this.operator.modify){ var button=document.createElement("button"); button.innerHTML='修改'; button.οnclick=function(){edit(id);}; div_button.appendChild(button); } if(this.operator.del){ var button=document.createElement("button"); button.innerHTML='删除'; button.οnclick=function(){del(id);}; div_button.appendChild(button); } if(this.operator.view){ var button=document.createElement("button"); button.innerHTML='查看'; button.οnclick=function(){view(id);}; div_button.appendChild(button); } return div_eventbar; }; DateGrid.prototype.getWeekTable=function (){ this.secttime=this.getTimesect(); var data= this.getThisWeekViewDate(this.virtualDay); var weekViewDates=data[0]; this.startday=this.formatDate(weekViewDates[0]); this.endday= this.formatDate(weekViewDates[6]); //创建table var table= document.createElement("table"); table.className=this.tableClass; //创建thead var thead=document.createElement("thead"); var tr=document.createElement("TR"); var td=document.createElement("td"); tr.appendChild(td); td.innerHTML='时间'; for(var i=0;i<7;i++){ var td=document.createElement("td"); td.innerHTML=(weekViewDates[i].getMonth()+1)+'/'+weekViewDates[i].getDate()+'('+this.weekName[i]+')'+GetLunarDateString(weekViewDates[i]); tr.appendChild(td); } thead.appendChild(tr); table.appendChild(thead); //创建tbody var tbody=document.createElement("tbody"); table.appendChild(tbody); //this.father.appendChild(table); for(var i=0;i<(this.secttime.length-1);i++){ //创建tr var tr=document.createElement("tr"); tbody.appendChild(tr); //创建th var th=document.createElement("th"); //th.innerHTML=this.secttime[i].getHours()+":"+this.secttime[i].getMinutes()+"-"+this.secttime[i+1].getHours()+":"+this.secttime[i+1].getMinutes() //; th.innerHTML=this.formatTime(this.secttime[i])+'-'+this.formatTime(this.secttime[i+1]); tr.appendChild(th); //创建td for(var j =0;j<7;j++){ var td=document.createElement("td"); td.id=this.formatDateTime(weekViewDates[j],this.secttime[i],this.secttime[i+1]); tr.appendChild(td); if(this.operator.add){ td.οndblclick=function(){ add( /*this.formatDate(weekViewDates[j]) ,this.formatTime(this.secttime[i]) ,this.formatTime(this.secttime[i+1])*/ ); }; } } } return table; } //data //conf /***********************************tool******************************************/ DateGrid.prototype.getId=function (date ,time){ var temp_date =new Date(); temp_date.setYear(parseInt(date.split("-")[0])); temp_date.setMonth(parseInt(date.split("-")[1]-1)); temp_date.setDate(parseInt(date.split("-")[2])); var temp_id=''; var hour=time.split(':')[0]; var minute=time.split(':')[1]; if(hour.charAt(0)=='0') hour=hour.charAt(1); if(minute.charAt(0)=='0') minute=minute.charAt(1); var temp_time=new Date(this.secttime[0]); temp_time.setHours(parseInt(hour)); temp_time.setMinutes(parseInt(minute)); for(var i=0;i<(this.secttime.length-1);i++){ if(this.secttime[i]<=temp_time && temp_time<=this.secttime[i+1]) { temp_id=this.formatDateTime(temp_date,this.secttime[i],this.secttime[i+1]); break; } } return temp_id; }; //时间片段 DateGrid.prototype.getTimesect=function(){ var secttime=new Array(); var start_time=new Date(); start_time.setHours(parseInt(this.start_time.split(":")[0])); start_time.setMinutes(parseInt(this.end_time.split(":")[1])); var end_time=new Date(); end_time.setHours(parseInt(this.end_time.split(":")[0])); end_time.setMinutes(parseInt(this.end_time.split(":")[1])); var distance = parseInt(this.offset_time); var temp_time=new Date(start_time); var i=0; while(temp_time<end_time){ secttime[i]=new Date(temp_time); temp_time.setMinutes(temp_time.getMinutes()+distance); i++; } secttime[secttime.length]=new Date(temp_time); return secttime; } //一周数组 DateGrid.prototype.getThisWeekViewDate=function(_date){ var data=new Array(); var temp_date =new Date(_date); //得到这星期的第一天 var weekViewDates=new Array(); temp_date.setDate(temp_date.getDate()-temp_date.getDay()); for(var i=0;i<7;i++){ weekViewDates[i]=new Date(temp_date); temp_date.setDate(temp_date.getDate()+1); } data[0]=weekViewDates; data[1]=new Date(); return data; }; //得到6*7的全月日期数组 DateGrid.prototype.getThisMonthViewDate=function(_date){ var data=new Array(); var temp_date =new Date(_date); temp_date.setDate(1); var monthViewDates=new Array(); var num_days_between=temp_date.getDay(); temp_date.setDate(temp_date.getDate()-num_days_between);//the begnning of month for(var i=0;i<6;i++){ monthViewDates[i]=new Array(); for(var j=0;j<7;j++){ monthViewDates[i][j]=new Date(temp_date); temp_date.setDate(temp_date.getDate()+1); } } data[0]=monthViewDates; data[1]=new Date(_date); data[1].setDate(1); data[2]=new Date(data[1]); data[2].setMonth(data[1].getMonth()+1); data[3]=new Date(); return data; }; //界面 DateGrid.prototype.repaint=function(){ var table =null; if(this.style=='month'){ table=this.getMonthTable(); }else if(this.style=='week'){ table=this.getWeekTable(); }else if(this.style=='day'){ table=this.getDayTable(); } this.father.innerHTML=''; this.father.appendChild(table); }; DateGrid.prototype.refresh=function(){ this.repaint(); }; DateGrid.prototype.formatDate=function (date){ var str=''; str=date.getFullYear()+'-'+ (date.getMonth()<9?('0'+(date.getMonth()+1)):(date.getMonth()+1))+'-'+ (date.getDate()<10?('0'+date.getDate()):date.getDate()); return str; }; DateGrid.prototype.formatTime=function(time){ var str=''; str=''+ (time.getHours()<10?('0'+time.getHours()):time.getHours()) + ':'+ (time.getMinutes()<10?('0'+time.getMinutes()):time.getMinutes()); return str; }; DateGrid.prototype.formatDateTime=function(date,starttime,endtime){ var str=this.formatDate(date)+'/'+ this.formatTime(starttime)+'-'+this.formatTime(endtime); return str; }; DateGrid.prototype.show=function (str){ document.getElementById(str).style.display=''; } DateGrid.prototype.hide=function (str){ document.getElementById(str).style.display='none'; }

下面是html部分<div id="tt" ></div> <mce:script type="text/javascript"><!-- var dd=new DateGrid({reader:{id:'ID',title:'TITLE',date:'DATESTART',time:'TIMESTART'},operator:{view:'view'}}); dd.render("tt"); dd.viewable=true; var events=new Array(); events[0]={"ID":"1","DATESTART":"2010-08-23","TIMESTART":"11:00","TITLE":"我的日程"}; // --></mce:script>