[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          // expect modern browser
 276          //if (is_ie5up || is_nav6up || is_gecko) {
 277              document.write('<a href="javascript: ' + this.objName + '.show()"><img src="' + this.imagesPath + 'dynCalendar.gif" border="0" id="' + this.imgID + '" /></a>');
 278              document.write('<div class="dynCalendar" id="' + this.layerID + '" onmouseover="' + this.objName + '._mouseover(true)" onmouseout="' + this.objName + '._mouseover(false)"></div>');
 279          //}
 280      }
 281  
 282  /**
 283  * Sets the offset to the mouse position
 284  * that the calendar appears at.
 285  *
 286  * @access public
 287  * @param integer Xoffset Number of pixels for vertical
 288  *                        offset from mouse position
 289  * @param integer Yoffset Number of pixels for horizontal
 290  *                        offset from mouse position
 291  */
 292  	function dynCalendar_setOffset(Xoffset, Yoffset)
 293      {
 294          this.setOffsetX(Xoffset);
 295          this.setOffsetY(Yoffset);
 296      }
 297  
 298  /**
 299  * Sets the X offset to the mouse position
 300  * that the calendar appears at.
 301  *
 302  * @access public
 303  * @param integer Xoffset Number of pixels for horizontal
 304  *                        offset from mouse position
 305  */
 306  	function dynCalendar_setOffsetX(Xoffset)
 307      {
 308          this.offsetX = Xoffset;
 309      }
 310  
 311  /**
 312  * Sets the Y offset to the mouse position
 313  * that the calendar appears at.
 314  *
 315  * @access public
 316  * @param integer Yoffset Number of pixels for vertical
 317  *                        offset from mouse position
 318  */
 319  	function dynCalendar_setOffsetY(Yoffset)
 320      {
 321          this.offsetY = Yoffset;
 322      }
 323      
 324  /**
 325  * Sets the images path
 326  *
 327  * @access public
 328  * @param string path Path to use for images
 329  */
 330  	function dynCalendar_setImagesPath(path)
 331      {
 332          this.imagesPath = path;
 333      }
 334  
 335  /**
 336  * Turns on/off the month dropdown
 337  *
 338  * @access public
 339  * @param boolean useMonthCombo Whether to use month dropdown or not
 340  */
 341  	function dynCalendar_setMonthCombo(useMonthCombo)
 342      {
 343          this.useMonthCombo = useMonthCombo;
 344      }
 345  
 346  /**
 347  * Turns on/off the year dropdown
 348  *
 349  * @access public
 350  * @param boolean useYearCombo Whether to use year dropdown or not
 351  */
 352  	function dynCalendar_setYearCombo(useYearCombo)
 353      {
 354          this.useYearCombo = useYearCombo;
 355      }
 356  
 357  /**
 358  * Sets the current month being displayed
 359  *
 360  * @access public
 361  * @param boolean month The month to set the current month to
 362  */
 363  	function dynCalendar_setCurrentMonth(month)
 364      {
 365          this.currentMonth = month;
 366      }
 367  
 368  /**
 369  * Sets the current month being displayed
 370  *
 371  * @access public
 372  * @param boolean year The year to set the current year to
 373  */
 374  	function dynCalendar_setCurrentYear(year)
 375      {
 376          this.currentYear = year;
 377      }
 378  
 379  /**
 380  * Sets the range of the year combo. Displays this number of
 381  * years either side of the year being displayed.
 382  *
 383  * @access public
 384  * @param integer range The range to set
 385  */
 386  	function dynCalendar_setYearComboRange(range)
 387      {
 388          this.yearComboRange = range;
 389      }
 390  
 391  /**
 392  * Returns the layer object
 393  *
 394  * @access private
 395  */
 396  	function dynCalendar_getLayer()
 397      {
 398          var layerID = this.layerID;
 399  
 400          if (document.getElementById(layerID)) {
 401  
 402              return document.getElementById(layerID);
 403  
 404          } else if (document.all(layerID)) {
 405              return document.all(layerID);
 406          }
 407      }
 408  
 409  /**
 410  * Hides the calendar layer
 411  *
 412  * @access private
 413  */
 414  	function dynCalendar_hideLayer()
 415      {
 416          this._getLayer().style.visibility = 'hidden';
 417      }
 418  
 419  /**
 420  * Shows the calendar layer
 421  *
 422  * @access private
 423  */
 424  	function dynCalendar_showLayer()
 425      {
 426          this._getLayer().style.visibility = 'visible';
 427      }
 428  
 429  /**
 430  * Sets the layers position
 431  *
 432  * @access private
 433  */
 434  	function dynCalendar_setLayerPosition()
 435      {
 436          
 437          //alert(document.getElementById(this.imgID).style.top);
 438          this._getLayer().style.top  = (dynCalendar_mouseY + this.offsetY) + 'px';
 439          this._getLayer().style.left = (dynCalendar_mouseX + this.offsetX) + 'px';
 440          
 441      }
 442  
 443  /**
 444  * Sets the innerHTML attribute of the layer
 445  *
 446  * @access private
 447  */
 448  	function dynCalendar_setHTML(html)
 449      {
 450          this._getLayer().innerHTML = html;
 451      }
 452  
 453  /**
 454  * Returns number of days in the supplied month
 455  *
 456  * @access private
 457  * @param integer month The month to get number of days in
 458  * @param integer year  The year of the month in question
 459  */
 460  	function dynCalendar_getDaysInMonth(month, year)
 461      {
 462          monthdays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
 463          if (month != 1) {
 464              return monthdays[month];
 465          } else {
 466              return ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0 ? 29 : 28);
 467          }
 468      }
 469  
 470  /**
 471  * onMouse(Over|Out) event handler
 472  *
 473  * @access private
 474  * @param boolean status Whether the mouse is over the
 475  *                       calendar or not
 476  */
 477  	function dynCalendar_mouseover(status)
 478      {
 479          dynCalendar_mouseoverStatus = status;
 480          return true;
 481      }
 482  
 483  /**
 484  * onMouseMove event handler
 485  */
 486      dynCalendar_oldOnmousemove = document.onmousemove ? document.onmousemove : new Function;
 487  
 488      document.onmousemove = function ()
 489      {
 490          // expect modern browser
 491          //if (is_ie5up || is_nav6up || is_gecko) {
 492              if (arguments[0]) {
 493                  dynCalendar_mouseX = arguments[0].pageX;
 494                  dynCalendar_mouseY = arguments[0].pageY;
 495              } else {
 496                  dynCalendar_mouseX = event.clientX + document.body.scrollLeft;
 497                  dynCalendar_mouseY = event.clientY + document.body.scrollTop;
 498                  arguments[0] = null;
 499              }
 500      
 501              dynCalendar_oldOnmousemove();
 502          //}
 503      }
 504  
 505  /**
 506  * Callbacks for document.onclick
 507  */
 508      dynCalendar_oldOnclick = document.onclick ? document.onclick : new Function;
 509  
 510      document.onclick = function ()
 511      {
 512          // expect modern browser
 513          //if (is_ie5up || is_nav6up || is_gecko) {
 514              if(!dynCalendar_mouseoverStatus){
 515                  for(i=0; i<dynCalendar_layers.length; ++i){
 516                      dynCalendar_layers[i]._hideLayer();
 517                  }
 518              }
 519      
 520              dynCalendar_oldOnclick(arguments[0] ? arguments[0] : null);
 521          //}
 522      }