Subversion Repositories wimsdev

Rev

Blame | Last modification | View Log | RSS feed

  1. /*
  2.         DynAPI Distribution
  3.         HTMLCalendar Class - based on calendar script from The JavaScript Source!! http://javascript.internet.com
  4.  
  5.         The DynAPI Distribution is distributed under the terms of the GNU LGPL license.
  6.        
  7.         Requires: HTMLContainer
  8. */
  9.  
  10. // to-do: add floating drop down menu to the month and year fields
  11. function HTMLCalendar(css,date){
  12.         this.HTMLContainer = HTMLContainer;
  13.         this.HTMLContainer(css,null);  
  14.  
  15.         this._date = date;
  16. };
  17. var p = dynapi.setPrototype('HTMLCalendar','HTMLContainer');
  18. p._olHConGetInnerHTML = HTMLContainer.prototype.getInnerHTML;
  19. p.getInnerHTML = function(){
  20.         this._build();
  21.         return this._olHConGetInnerHTML();
  22. }
  23. // color props
  24. p.borSize = 1;
  25. p.borCol = '#BBBBBB';
  26. p.titleBgCol ='#CCCCCC';
  27. p.titleFgCol ='#000000';
  28. p.wkDayBgCol ='#FFFFFF';
  29. p.wkDayFgCol = '#000000';
  30. p.selBorCol = '#CCCCCC';
  31. p.selBgCol = '#DEDEFF';
  32. p.selFgCol = '#000000';
  33. p.selTDayBgCol = '#EEEEEE';
  34. p.selTDayFgCol = '#000000'
  35. p._build = function(dt){
  36.         var tmp;
  37.         var idate=((dt)? dt:this._date)||new Date();
  38.         this._date = new Date(idate.toString());
  39.         var Calendar = new Date(idate.toString());
  40.         var day_of_week = new Array('Sun','Mon','Tue','Wed','Thu','Fri','Sat');
  41.         var month_of_year = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
  42.         var year = Calendar.getFullYear(),month = Calendar.getMonth();
  43.         var today = (new Date()).getDate();
  44.         var selectedDay = Calendar.getDate(),weekday = Calendar.getDay();
  45.         var DAYS_OF_WEEK = 7,DAYS_OF_MONTH = 31,cal;
  46.         var TR_start = '<tr>',TR_end = '</tr>';
  47.        
  48.         tmp = '<td><table cellspacing="0" bgcolor="@1" @2><tr><td width="20"><b><center><font face="arial" size="2" color="@3">';
  49.         var highlight_today = tmp.replace(/@0/,0).replace(/@1/,this.selTDayBgCol).replace(/@2/,'').replace(/@3/,this.selTDayFgCol);
  50.         var highlight_start = tmp.replace(/@0/,1).replace(/@1/,this.selBgCol).replace(/@2/,((dynapi.ua.ns4)? 'border="1"':'style="border:2px solid '+this.selBorCol+'"')).replace(/@3/,this.selFgCol);
  51.         var highlight_end   = '</font></center></td></tr></table></b>';
  52.        
  53.         tmp = '<td @0 width="30" height="27"><center><font face=arial size="2" color="@1">';   
  54.         var TD_wkDayStart = tmp.replace(/@0/,'bgcolor="'+this.wkDayBgCol+'"').replace(/@1/,this.wkDayFgCol);
  55.         var TD_start = tmp.replace(/@0/,'').replace(/@1/,this.foreCol)
  56.         var TD_end = '</font></center></td>';
  57.  
  58.         tmp = (dynapi.ua.ns4)? 'border="'+this.borSize+'"':'style="border:'+this.borSize+'px solid '+this.borCol+'"';
  59.         cal='<table '+tmp+' width="'+(239+this.borSize)+'" bgcolor="'+this.backCol+'" cellspacing="0" cellpadding="0"><tr><td>';
  60.         cal+='<table border="0" cellspacing="0" cellpadding="2">' + TR_start;
  61.         cal+='<td colspan="' + DAYS_OF_WEEK + '" bgcolor="'+this.titleBgCol+'"><center><b><font face="arial" size="2" color="'+this.titleFgCol+'">';
  62.         cal+=month_of_year[month]  + ' &nbsp;&nbsp;' + year + '</b>' + TD_end + TR_end;
  63.         cal+=TR_start;
  64.  
  65.         Calendar.setDate(1);
  66.         Calendar.setMonth(month);
  67.  
  68.         // build days-of-week
  69.         for(index=0; index < DAYS_OF_WEEK; index++){
  70.                 tmp = day_of_week[index];
  71.                 if(weekday == index) tmp = '<b>' + day_of_week[index] + '</b>';
  72.                 cal += TD_wkDayStart + tmp + TD_end;
  73.         }
  74.  
  75.         cal += TD_end + TR_end;
  76.         cal += TR_start;
  77.         for(index=0; index < Calendar.getDay(); index++){
  78.                 cal += TD_start + '&nbsp;' + TD_end;
  79.         }
  80.  
  81.         // build days-of-month
  82.         for(index=0; index < DAYS_OF_MONTH; index++){
  83.                 if( Calendar.getDate() > index ){
  84.                         week_day =Calendar.getDay();
  85.                         if(week_day == 0) cal += TR_start;
  86.                         if(week_day != DAYS_OF_WEEK){
  87.                                 var day  = Calendar.getDate();
  88.                                 if(selectedDay==Calendar.getDate()){
  89.                                         cal += highlight_start + day + highlight_end + TD_end;
  90.                                 }else{
  91.                                         idate=year+"/"+(month+1)+"/"+day
  92.                                         click='onclick="'+this+'._build(\''+idate+'\');return false;"';
  93.                                         click = '<a '+click+' style="text-decoration:none;color:@0" href="javascript:;">'+ day + '</a>'
  94.                                         if(today==Calendar.getDate()){
  95.                                                 click=click.replace(/@0/,this.selTDayFgCol);
  96.                                                 cal += highlight_today + click + highlight_end + TD_end;
  97.                                         }
  98.                                         else {
  99.                                                 click=click.replace(/@0/,this.foreCol);
  100.                                                 cal += TD_start +click+TD_end;
  101.                                         }
  102.                                        
  103.                                 }
  104.                         }
  105.  
  106.                         if(week_day == DAYS_OF_WEEK)
  107.                         al += TR_end;
  108.                 }
  109.                 Calendar.setDate(Calendar.getDate()+1);
  110.         }
  111.         cal += '</td></tr></table></table>';
  112.  
  113.         this.setHTML(cal);
  114.         this.invokeEvent('change');
  115. };
  116. p.getDate  = function(dt){return this._date};
  117. p.setDate  = function(dt){
  118.         this._build(dt);
  119. };
  120.