[Summary view] [Print] [Text view]

   1  /**
   2  * Filename.......: calendar.js
   3  * Project........: Popup Calendar
   4  * Last Modified..: $Date: 2006/09/11 20:13:54 $
   5  * CVS Revision...: $Revision: 1.1 $
   6  * Copyright......: 2001, 2002 Richard Heyes
   7  *
   8  * Enhancements...: 17/03/2007 Oliver Georgi, http://www.phpwcms.de
   9  *                  - detect browser language
  10  *                  - set calendar month and dayname based on given language
  11  */
  12  
  13  /**
  14  * Global variables
  15  */
  16      dynCalendar_layers          = new Array();
  17      dynCalendar_mouseoverStatus = false;
  18      dynCalendar_mouseX          = 0;
  19      dynCalendar_mouseY          = 0;
  20  
  21  /**
  22  * The calendar constructor
  23  *
  24  * @access public
  25  * @param string objName      Name of the object that you create
  26  * @param string callbackFunc Name of the callback function
  27  * @param string OPTIONAL     Optional layer name
  28  * @param string OPTIONAL     Optional images path
  29  */
  30  	function dynCalendar(objName, callbackFunc)
  31      {
  32          /**
  33          * Properties
  34          */
  35          // Todays date
  36          this.today          = new Date();
  37          this.date           = this.today.getDate();
  38          this.month          = this.today.getMonth();
  39          this.year           = this.today.getFullYear();
  40  
  41          this.objName        = objName;
  42          this.callbackFunc   = callbackFunc;
  43          this.imagesPath     = arguments[2] ? arguments[2] : 'images/';
  44          this.layerID        = arguments[3] ? arguments[3] : 'dynCalendar_layer_' + dynCalendar_layers.length;
  45          this.imgID            = arguments[3] ? 'img'+arguments[3] : 'dynCalendar_img_' + dynCalendar_layers.length;
  46  
  47          this.offsetX        = 5;
  48          this.offsetY        = 5;
  49  
  50          this.useMonthCombo  = true;
  51          this.useYearCombo   = true;
  52          this.yearComboRange = 5;
  53  
  54          this.currentMonth   = this.month;
  55          this.currentYear    = this.year;
  56  
  57          /**
  58          * Public Methods
  59          */
  60          this.show              = dynCalendar_show;
  61          this.writeHTML         = dynCalendar_writeHTML;
  62  
  63          // Accessor methods
  64          this.setOffset         = dynCalendar_setOffset;
  65          this.setOffsetX        = dynCalendar_setOffsetX;
  66          this.setOffsetY        = dynCalendar_setOffsetY;
  67          this.setImagesPath     = dynCalendar_setImagesPath;
  68          this.setMonthCombo     = dynCalendar_setMonthCombo;
  69          this.setYearCombo      = dynCalendar_setYearCombo;
  70          this.setCurrentMonth   = dynCalendar_setCurrentMonth;
  71          this.setCurrentYear    = dynCalendar_setCurrentYear;
  72          this.setYearComboRange = dynCalendar_setYearComboRange;
  73  
  74          /**
  75          * Private methods
  76          */
  77          // Layer manipulation
  78          this._getLayer         = dynCalendar_getLayer;
  79          this._hideLayer        = dynCalendar_hideLayer;
  80          this._showLayer        = dynCalendar_showLayer;
  81          this._setLayerPosition = dynCalendar_setLayerPosition;
  82          this._setHTML          = dynCalendar_setHTML;
  83  
  84          // Miscellaneous
  85          this._getDaysInMonth   = dynCalendar_getDaysInMonth;
  86          this._mouseover        = dynCalendar_mouseover;
  87  
  88          /**
  89          * Constructor type code
  90          */
  91          dynCalendar_layers[dynCalendar_layers.length] = this;
  92          this.writeHTML();
  93      }
  94  
  95  /**
  96  * Shows the calendar, or updates the layer if
  97  * already visible.
  98  *
  99  * @access public
 100  * @param integer month Optional month number (0-11)
 101  * @param integer year  Optional year (YYYY format)
 102  */
 103  	function dynCalendar_show()
 104      {
 105          // Variable declarations to prevent globalisation
 106          var month, year, monthnames, numdays, thisMonth, firstOfMonth;
 107          var ret, row, i, cssClass, linkHTML, previousMonth, previousYear;
 108          var nextMonth, nextYear, prevImgHTML, prevLinkHTML, nextImgHTML, nextLinkHTML;
 109          var monthComboOptions, monthCombo, yearComboOptions, yearCombo, html;
 110          
 111          this.currentMonth = month = arguments[0] != null ? arguments[0] : this.currentMonth;
 112          this.currentYear  = year  = arguments[1] != null ? arguments[1] : this.currentYear;
 113          
 114          var browserLang   = navigator.language ? navigator.language : navigator.userLanguage;
 115          if(browserLang) {
 116              browserLang = browserLang.substr(0,2);
 117              browserLang = browserLang.toLowerCase();
 118          } else {
 119              browserLang = 'en';
 120          }
 121          switch(browserLang) {
 122              
 123              case 'de': // German
 124                  monthnames = new Array('Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember');
 125                  daynames   = new Array('So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa');
 126                  break;
 127              case 'no': // Norwegian
 128                  monthnames = new Array('Januar','Februar','Mars','April','Mai','Juni','Juli','August','September','Oktober','November','Desember');
 129                  daynames   = new Array('Søn','Man','Tir','Ons','Tor','Fre','Lør');
 130                  break;
 131              case 'nl': // Dutch
 132                  monthnames = new Array('Januari','Februari','Maart','April','Mei','Juni','Juli','Augustus','September','Oktober','November','December');
 133                  daynames   = new Array('Zo','Ma','Di','Wo','Do','Vr','Za');
 134                  break;
 135              case 'es': // Spanish
 136                  monthnames = new Array('Enero','Febrero','Marzo','April','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre');
 137                  daynames   = new Array('Dom','Lun','Mar','Mie','Jue','Vie','Sab');
 138                  break;
 139              case 'pt': // Portuguese
 140                  monthnames = new Array('Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro');
 141                  daynames   = new Array('Dom','Seg','Ter','Qua','Qui','Sex','Sáb');
 142                  break;
 143              case 'fr': // French
 144                  monthnames = new Array('Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre');
 145                  daynames   = new Array('Dim','Lun','Mar','Mer','Jeu','Ven','Sam');
 146                  break;
 147              case 'da': // Danish
 148                  monthnames = new Array('januar','februar','marts','april','maj','juni','juli','august','september','oktober','november','december');
 149                  daynames   = new Array('søn','man','tirs','ons','tors','fre','lør');
 150                  break;
 151              case 'hu': // Hungarian
 152                  monthnames = new Array('január','február','március','április','május','június','július','augusztus','szeptember','október','november','december');
 153                  daynames   = new Array('vas','hé','ke','sze','cs','pé','szo');
 154                  break;
 155              case 'it': // Italian
 156                  monthnames = new Array('Gennaio','Febbraio','Marzo','Aprile','Maggio','Giugno','Luglio','Agosto','Settembre','Ottobre','Novembre','Dicembre');
 157                  daynames   = new Array('Dom','Lun',';Mar','Mer','Gio','Ven','Sab');
 158                  break;
 159              case 'se': // Swedish
 160                  monthnames = new Array('Januari','Februari','Mars','April','Maj','Juni','Juli','Augusti','September','Oktober','November','December');
 161                  daynames   = new Array('Sön','Mån','Tis','Ons','Tor','Fre','Lör');
 162                  break;
 163              default: //english
 164                  monthnames = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
 165                  daynames   = new Array('Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat');
 166              
 167          }
 168          
 169          numdays    = this._getDaysInMonth(month, year);
 170  
 171          thisMonth    = new Date(year, month, 1);
 172          firstOfMonth = thisMonth.getDay();
 173  
 174          // First few blanks up to first day
 175          ret = new Array(new Array());
 176          for(i=0; i<firstOfMonth; i++){
 177              ret[0][ret[0].length] = '<td>&nbsp;</td>';
 178          }
 179  
 180          // Main body of calendar
 181          row = 0;
 182          i   = 1;
 183          while(i <= numdays){
 184              if(ret[row].length == 7){
 185                  ret[++row] = new Array();
 186              }
 187  
 188              /**
 189              * Generate this cells' HTML
 190              */
 191              cssClass = (i == this.date && month == this.month && year == this.year) ? 'dynCalendar_today' : 'dynCalendar_day';
 192              linkHTML = '<a href="javascript: ' + this.callbackFunc + '(' + i + ', ' + (Number(month) + 1) + ', ' + year + '); ' + this.objName + '._hideLayer()">' + (i++) + '</a>';
 193              ret[row][ret[row].length] = '<td align="center" class="' + cssClass + '">' + linkHTML + '</td>';
 194          }
 195  
 196          // Format the HTML
 197          for(i=0; i<ret.length; i++){
 198              ret[i] = ret[i].join('\n') + '\n';
 199          }
 200  
 201          previousYear  = thisMonth.getFullYear();
 202          previousMonth = thisMonth.getMonth() - 1;
 203          if(previousMonth < 0){
 204              previousMonth = 11;
 205              previousYear--;
 206          }
 207          
 208          nextYear  = thisMonth.getFullYear();
 209          nextMonth = thisMonth.getMonth() + 1;
 210          if(nextMonth > 11){
 211              nextMonth = 0;
 212              nextYear++;
 213          }
 214  
 215          prevImgHTML  = '<img src="' + this.imagesPath + '/prev.gif" alt="<<" border="0" />';
 216          prevLinkHTML = '<a href="javascript: ' + this.objName + '.show(' + previousMonth + ', ' + previousYear + ')">' + prevImgHTML + '</a>';
 217          nextImgHTML  = '<img src="' + this.imagesPath + '/next.gif" alt="<<" border="0" />';
 218          nextLinkHTML = '<a href="javascript: ' + this.objName + '.show(' + nextMonth + ', ' + nextYear + ')">' + nextImgHTML + '</a>';
 219  
 220          /**
 221          * Build month combo
 222          */
 223          if (this.useMonthCombo) {
 224              monthComboOptions = '';
 225              for (i=0; i<12; i++) {
 226                  selected = (i == thisMonth.getMonth() ? 'selected="selected"' : '');
 227                  monthComboOptions += '<option value="' + i + '" ' + selected + '>' + monthnames[i] + '</option>';
 228              }
 229              monthCombo = '<select name="months" onchange="' + this.objName + '.show(this.options[this.selectedIndex].value, ' + this.objName + '.currentYear)">' + monthComboOptions + '</select>';
 230          } else {
 231              monthCombo = monthnames[thisMonth.getMonth()];
 232          }
 233          
 234          /**
 235          * Build year combo
 236          */
 237          if (this.useYearCombo) {
 238              yearComboOptions = '';
 239              for (i = thisMonth.getFullYear() - this.yearComboRange; i <= (thisMonth.getFullYear() + this.yearComboRange); i++) {
 240                  selected = (i == thisMonth.getFullYear() ? 'selected="selected"' : '');
 241                  yearComboOptions += '<option value="' + i + '" ' + selected + '>' + i + '</option>';
 242              }
 243              yearCombo = '<select name="years" onchange="' + this.objName + '.show(' + this.objName + '.currentMonth, this.options[this.selectedIndex].value)">' + yearComboOptions + '</select>';
 244          } else {
 245              yearCombo = thisMonth.getFullYear();
 246          }
 247  
 248          html = '<table border="0" cellpadding="0" cellspacing="0" class="dynCalendar_table" summary="">';
 249          html += '<tr><td class="dynCalendar_header">' + prevLinkHTML + '</td><td colspan="5" align="center" class="dynCalendar_header">' + monthCombo + ' ' + yearCombo + '</td><td align="right" class="dynCalendar_header">' + nextLinkHTML + '</td></tr>';
 250          html += '<tr>';
 251          html += '<td class="dynCalendar_dayname">'+daynames[0]+'</td>';
 252          html += '<td class="dynCalendar_dayname">'+daynames[1]+'</td>';
 253          html += '<td class="dynCalendar_dayname">'+daynames[2]+'</td>';
 254          html += '<td class="dynCalendar_dayname">'+daynames[3]+'</td>';
 255          html += '<td class="dynCalendar_dayname">'+daynames[4]+'</td>';
 256          html += '<td class="dynCalendar_dayname">'+daynames[5]+'</td>';
 257          html += '<td class="dynCalendar_dayname">'+daynames[6]+'</td></tr>';
 258          html += '<tr>' + ret.join('</tr>\n<tr>') + '</tr>';
 259          html += '</table>';
 260  
 261          this._setHTML(html);
 262          if (!arguments[0] && !arguments[1]) {
 263              this._showLayer();
 264              this._setLayerPosition();
 265          }
 266      }
 267  
 268  /**
 269  * Writes HTML to document for layer
 270  *
 271  * @access public
 272  */
 273  	function dynCalendar_writeHTML()
 274      {
 275          if (is_ie5up || is_nav6up || is_gecko) {
 276              document.write('<a href="javascript: ' + this.objName + '.show()"><img src="' + this.imagesPath + 'dynCalendar.gif" border="0" id="' + this.imgID + '" /></a>');
 277              document.write('<div class="dynCalendar" id="' + this.layerID + '" onmouseover="' + this.objName + '._mouseover(true)" onmouseout="' + this.objName + '._mouseover(false)"></div>');
 278          }
 279      }
 280  
 281  /**
 282  * Sets the offset to the mouse position
 283  * that the calendar appears at.
 284  *
 285  * @access public
 286  * @param integer Xoffset Number of pixels for vertical
 287  *                        offset from mouse position
 288  * @param integer Yoffset Number of pixels for horizontal
 289  *                        offset from mouse position
 290  */
 291  	function dynCalendar_setOffset(Xoffset, Yoffset)
 292      {
 293          this.setOffsetX(Xoffset);
 294          this.setOffsetY(Yoffset);
 295      }
 296  
 297  /**
 298  * Sets the X offset to the mouse position
 299  * that the calendar appears at.
 300  *
 301  * @access public
 302  * @param integer Xoffset Number of pixels for horizontal
 303  *                        offset from mouse position
 304  */
 305  	function dynCalendar_setOffsetX(Xoffset)
 306      {
 307          this.offsetX = Xoffset;
 308      }
 309  
 310  /**
 311  * Sets the Y offset to the mouse position
 312  * that the calendar appears at.
 313  *
 314  * @access public
 315  * @param integer Yoffset Number of pixels for vertical
 316  *                        offset from mouse position
 317  */
 318  	function dynCalendar_setOffsetY(Yoffset)
 319      {
 320          this.offsetY = Yoffset;
 321      }
 322      
 323  /**
 324  * Sets the images path
 325  *
 326  * @access public
 327  * @param string path Path to use for images
 328  */
 329  	function dynCalendar_setImagesPath(path)
 330      {
 331          this.imagesPath = path;
 332      }
 333  
 334  /**
 335  * Turns on/off the month dropdown
 336  *
 337  * @access public
 338  * @param boolean useMonthCombo Whether to use month dropdown or not
 339  */
 340  	function dynCalendar_setMonthCombo(useMonthCombo)
 341      {
 342          this.useMonthCombo = useMonthCombo;
 343      }
 344  
 345  /**
 346  * Turns on/off the year dropdown
 347  *
 348  * @access public
 349  * @param boolean useYearCombo Whether to use year dropdown or not
 350  */
 351  	function dynCalendar_setYearCombo(useYearCombo)
 352      {
 353          this.useYearCombo = useYearCombo;
 354      }
 355  
 356  /**
 357  * Sets the current month being displayed
 358  *
 359  * @access public
 360  * @param boolean month The month to set the current month to
 361  */
 362  	function dynCalendar_setCurrentMonth(month)
 363      {
 364          this.currentMonth = month;
 365      }
 366  
 367  /**
 368  * Sets the current month being displayed
 369  *
 370  * @access public
 371  * @param boolean year The year to set the current year to
 372  */
 373  	function dynCalendar_setCurrentYear(year)
 374      {
 375          this.currentYear = year;
 376      }
 377  
 378  /**
 379  * Sets the range of the year combo. Displays this number of
 380  * years either side of the year being displayed.
 381  *
 382  * @access public
 383  * @param integer range The range to set
 384  */
 385  	function dynCalendar_setYearComboRange(range)
 386      {
 387          this.yearComboRange = range;
 388      }
 389  
 390  /**
 391  * Returns the layer object
 392  *
 393  * @access private
 394  */
 395  	function dynCalendar_getLayer()
 396      {
 397          var layerID = this.layerID;
 398  
 399          if (document.getElementById(layerID)) {
 400  
 401              return document.getElementById(layerID);
 402  
 403          } else if (document.all(layerID)) {
 404              return document.all(layerID);
 405          }
 406      }
 407  
 408  /**
 409  * Hides the calendar layer
 410  *
 411  * @access private
 412  */
 413  	function dynCalendar_hideLayer()
 414      {
 415          this._getLayer().style.visibility = 'hidden';
 416      }
 417  
 418  /**
 419  * Shows the calendar layer
 420  *
 421  * @access private
 422  */
 423  	function dynCalendar_showLayer()
 424      {
 425          this._getLayer().style.visibility = 'visible';
 426      }
 427  
 428  /**
 429  * Sets the layers position
 430  *
 431  * @access private
 432  */
 433  	function dynCalendar_setLayerPosition()
 434      {
 435          
 436          //alert(document.getElementById(this.imgID).style.top);
 437          this._getLayer().style.top  = (dynCalendar_mouseY + this.offsetY) + 'px';
 438          this._getLayer().style.left = (dynCalendar_mouseX + this.offsetX) + 'px';
 439          
 440      }
 441  
 442  /**
 443  * Sets the innerHTML attribute of the layer
 444  *
 445  * @access private
 446  */
 447  	function dynCalendar_setHTML(html)
 448      {
 449          this._getLayer().innerHTML = html;
 450      }
 451  
 452  /**
 453  * Returns number of days in the supplied month
 454  *
 455  * @access private
 456  * @param integer month The month to get number of days in
 457  * @param integer year  The year of the month in question
 458  */
 459  	function dynCalendar_getDaysInMonth(month, year)
 460      {
 461          monthdays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
 462          if (month != 1) {
 463              return monthdays[month];
 464          } else {
 465              return ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0 ? 29 : 28);
 466          }
 467      }
 468  
 469  /**
 470  * onMouse(Over|Out) event handler
 471  *
 472  * @access private
 473  * @param boolean status Whether the mouse is over the
 474  *                       calendar or not
 475  */
 476  	function dynCalendar_mouseover(status)
 477      {
 478          dynCalendar_mouseoverStatus = status;
 479          return true;
 480      }
 481  
 482  /**
 483  * onMouseMove event handler
 484  */
 485      dynCalendar_oldOnmousemove = document.onmousemove ? document.onmousemove : new Function;
 486  
 487      document.onmousemove = function ()
 488      {
 489          if (is_ie5up || is_nav6up || is_gecko) {
 490              if (arguments[0]) {
 491                  dynCalendar_mouseX = arguments[0].pageX;
 492                  dynCalendar_mouseY = arguments[0].pageY;
 493              } else {
 494                  dynCalendar_mouseX = event.clientX + document.body.scrollLeft;
 495                  dynCalendar_mouseY = event.clientY + document.body.scrollTop;
 496                  arguments[0] = null;
 497              }
 498      
 499              dynCalendar_oldOnmousemove();
 500          }
 501      }
 502  
 503  /**
 504  * Callbacks for document.onclick
 505  */
 506      dynCalendar_oldOnclick = document.onclick ? document.onclick : new Function;
 507  
 508      document.onclick = function ()
 509      {
 510          if (is_ie5up || is_nav6up || is_gecko) {
 511              if(!dynCalendar_mouseoverStatus){
 512                  for(i=0; i<dynCalendar_layers.length; ++i){
 513                      dynCalendar_layers[i]._hideLayer();
 514                  }
 515              }
 516      
 517              dynCalendar_oldOnclick(arguments[0] ? arguments[0] : null);
 518          }
 519      }