Fancy Calendar : Calendar « GUI Components « JavaScript DHTML

JavaScript DHTML
1. Ajax Layer
2. Data Type
3. Date Time
4. Development
5. Document
6. Event
7. Event onMethod
8. Form Control
9. GUI Components
10. HTML
11. Javascript Collections
12. Javascript Objects
13. Language Basics
14. Node Operation
15. Object Oriented
16. Page Components
17. Security
18. Style Layout
19. Table
20. Utilities
21. Window Browser
Microsoft Office Word 2007 Tutorial
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
C# / C Sharp
C# / CSharp Tutorial
ASP.Net
JavaScript Tutorial
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
PHP
Python
SQL Server / T-SQL
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
JavaScript DHTML » GUI Components » Calendar 
Fancy Calendar

<html>
<head>

<script type="text/javascript" language="JavaScript">
//  written  by Tan Ling Wee
//  last updated 28 July 2003
//  Web Site:  http://64.246.32.44/~admin59/index.htm
//  email :  info@sparrowscripts.com
//      url : www.sparrowscripts.com
//  TabSize: 4
//
//  modified by ALQUANTO 30 July 2003 - german language included.
//                    - modified languageLogic with the ISO-2letter-strings
//                    - changes in in showCalendar: defaultLanguage is already set...
//                    - js and html corrected... more xhtml-compliant... simplier css
//  email: popcalendar@alquanto.de
//
//  modified by PinoToy 25 July 2003  - new logic for multiple languages (English, Spanish and ready for more).
//                    - changes in popUpMonth & popDownMonth methods for hidding  popup.
//                    - changes in popDownYear & popDownYear methods for hidding  popup.
//                    - new logic for disabling dates in  the past.
//                    - new method showCalendar, dynamic  configuration of language, enabling  past & position.
//                    - changes in the styles.
//  email  : pinotoy@yahoo.com

  var language = 'en';  // Default Language: en - english ; es - spanish; de - german
  var enablePast = 0;    // 0 - disabled ; 1 - enabled
  var fixedX = -1;    // x position (-1 if to appear below control)
  var fixedY = -1;    // y position (-1 if to appear below control)
  var startAt = 1;    // 0 - sunday ; 1 - monday
  var showWeekNumber = 0;  // 0 - don't show; 1 - show
  var showToday = 1;    // 0 - don't show; 1 - show
  var imgDir = '';    // directory for images ... e.g. var imgDir="/img/"
  var dayName = '';

  var gotoString = {
    en : 'Go To Current Month',
    es : 'Ir al Mes Actual',
    de : 'Gehe zu aktuellem Monat'
  };
  var todayString = {
    en : 'Today is',
    es : 'Hoy es',
    de : 'Heute ist'
  };
  var weekString = {
    en : 'Wk',
    es : 'Sem',
    de : 'KW'
  };
  var scrollLeftMessage = {
    en : 'Click to scroll to previous month. Hold mouse button to scroll automatically.',
    es : 'Presione para pasar al mes anterior. Deje presionado para pasar varios meses.',
    de : 'Klicken um zum vorigen Monat zu gelangen. Gedruckt halten, um automatisch weiter zu scrollen.'
  };
  var scrollRightMessage = {
    en : 'Click to scroll to next month. Hold mouse button to scroll automatically.',
    es : 'Presione para pasar al siguiente mes. Deje presionado para pasar varios meses.',
    de : 'Klicken um zum nachsten Monat zu gelangen. Gedruckt halten, um automatisch weiter zu scrollen.'
  };
  var selectMonthMessage = {
    en : 'Click to select a month.',
    es : 'Presione para seleccionar un mes',
    de : 'Klicken um Monat auszuwahlen'
  };
  var selectYearMessage = {
    en : 'Click to select a year.',
    es : 'Presione para seleccionar un ano',
    de : 'Klicken um Jahr auszuwahlen'
  };
  var selectDateMessage = {    // do not replace [date], it will be replaced by date.
    en : 'Select [dateas date.',
    es : 'Seleccione [datecomo fecha',
    de : 'Wahle [dateals Datum.'
  };
  var  monthName = {
    en : new Array('January','February','March','April','May','June','July','August','September','October','November','December'),
    es : new Array('Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'),
    de : new Array('Januar','Februar','Marz','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember')
  };
  var  monthName2 = {
    en : new Array('JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'),
    es : new Array('ENE','FEB','MAR','ABR','MAY','JUN','JUL','AGO','SEP','OCT','NOV','DIC'),
    de : new Array('JAN','FEB','MRZ','APR','MAI','JUN','JUL','AUG','SEP','OKT','NOV','DEZ')
  };

  if (startAt==0) {
    dayName = {
      en : new Array('Sun','Mon','Tue','Wed','Thu','Fri','Sat'),
      es : new Array('Dom','Lun','Mar','Mie','Jue','Vie','Sab'),
      de : new Array('So','Mo','Di','Mi','Do','Fr','Sa')
    };
  else {
    dayName = {
      en : new Array('Mon','Tue','Wed','Thu','Fri','Sat','Sun'),
      es : new Array('Lun','Mar','Mie','Jue','Vie','Sab','Dom'),
      de : new Array('Mo','Di','Mi','Do','Fr','Sa','So')
    };
  }

  var crossobj, crossMonthObj, crossYearObj, monthSelected, yearSelected, dateSelected, omonthSelected, oyearSelected, odateSelected, monthConstructed, yearConstructed, intervalID1, intervalID2, timeoutID1, timeoutID2, ctlToPlaceValue, ctlNow, dateFormat, nStartingYear, selDayAction, isPast;
  var visYear  = 0;
  var visMonth = 0;
  var bPageLoaded = false;
  var ie  = document.all;
  var dom = document.getElementById;
  var ns4 = document.layers;
  var today    = new Date();
  var dateNow  = today.getDate();
  var monthNow = today.getMonth();
  var yearNow  = today.getYear();
  var imgsrc   = new Array('drop1.gif','drop2.gif','left1.gif','left2.gif','right1.gif','right2.gif');
  var img      = new Array();
  var bShow    = false;

  /* hides <select> and <applet> objects (for IE only) */
  function hideElementelmID, overDiv ) {
    if(ie) {
      for(i = 0; i < document.all.tagselmID ).length; i++) {
        obj = document.all.tagselmID )[i];
        if(!obj || !obj.offsetParentcontinue;

        // Find the element's offsetTop and offsetLeft relative to the BODY tag.
        objLeft   = obj.offsetLeft;
        objTop    = obj.offsetTop;
        objParent = obj.offsetParent;

        while(objParent.tagName.toUpperCase() != 'BODY') {
          objLeft  += objParent.offsetLeft;
          objTop   += objParent.offsetTop;
          objParent = objParent.offsetParent;
        }

        objHeight = obj.offsetHeight;
        objWidth  = obj.offsetWidth;

        if((overDiv.offsetLeft + overDiv.offsetWidth<= objLeft);
        else if((overDiv.offsetTop + overDiv.offsetHeight<= objTop);
        /* CHANGE by Charlie Roche for nested TDs*/
        else if(overDiv.offsetTop >= (objTop + objHeight + obj.height));
        /* END CHANGE */
        else if(overDiv.offsetLeft >= (objLeft + objWidth));
        else {
          obj.style.visibility = 'hidden';
        }
      }
    }
  }

  /*
  * unhides <select> and <applet> objects (for IE only)
  */
  function showElement(elmID) {
    if(ie) {
      for(i = 0; i < document.all.tagselmID ).length; i++) {
        obj = document.all.tags(elmID)[i];
        if(!obj || !obj.offsetParentcontinue;
        obj.style.visibility = '';
      }
    }
  }

  function HolidayRec (d, m, y, desc) {
    this.d = d;
    this.m = m;
    this.y = y;
    this.desc = desc;
  }

  var HolidaysCounter = 0;
  var Holidays = new Array();

  function addHoliday (d, m, y, desc) {
    Holidays[HolidaysCounter++new HolidayRec (d, m, y, desc);
  }

  if (dom) {
    for  (i=0;i<imgsrc.length;i++) {
      img[inew Image;
      img[i].src = imgDir + imgsrc[i];
    }
    document.write ('<div onclick="bShow=true" id="calendar" style="z-index:+999;position:absolute;visibility:hidden;"><table width="'+((showWeekNumber==1)?250:220)+'" style="font-family:Arial;font-size:11px;border: 1px solid #A0A0A0;" bgcolor="#ffffff"><tr bgcolor="#000066"><td><table width="'+((showWeekNumber==1)?248:218)+'"><tr><td style="padding:2px;font-family:Arial;font-size:11px;"><font color="#ffffff' + '' /*C9D3E9*/ +'"><b><span id="caption"></span></b></font></td><td align="right"><a href="javascript:hideCalendar()"><img src="'+imgDir+'close.gif" width="15" height="13" border="0" /></a></td></tr></table></td></tr><tr><td style="padding:5px" bgcolor="#ffffff"><span id="content"></span></td></tr>');

    if (showToday == 1) {
      document.write ('<tr bgcolor="#f0f0f0"><td style="padding:5px" align="center"><span id="lblToday"></span></td></tr>');
    }
      
    document.write ('</table></div><div id="selectMonth" style="z-index:+999;position:absolute;visibility:hidden;"></div><div id="selectYear" style="z-index:+999;position:absolute;visibility:hidden;"></div>');
  }

  var  styleAnchor = 'text-decoration:none;color:black;';
  var  styleLightBorder = 'border:1px solid #a0a0a0;';

  function swapImage(srcImg, destImg) {
    if (iedocument.getElementById(srcImg).setAttribute('src',imgDir + destImg);
  }

  function init() {
    if (!ns4)
    {
      if (!ieyearNow += 1900;

      crossobj=(dom)?document.getElementById('calendar').style : ie? document.all.calendar : document.calendar;
      hideCalendar();

      crossMonthObj = (dom? document.getElementById('selectMonth').style : ie ? document.all.selectMonth : document.selectMonth;

      crossYearObj = (dom? document.getElementById('selectYear').style : ie ? document.all.selectYear : document.selectYear;

      monthConstructed = false;
      yearConstructed = false;

      if (showToday == 1) {
        document.getElementById('lblToday').innerHTML =  '<font color="#000066">' + todayString[language' <a onmousemove="window.status=\''+gotoString[language]+'\'" onmouseout="window.status=\'\'" title="'+gotoString[language]+'" style="'+styleAnchor+'" href="javascript:monthSelected=monthNow;yearSelected=yearNow;constructCalendar();">'+dayName[language][(today.getDay()-startAt==-1)?6:(today.getDay()-startAt)]+', ' + dateNow + ' ' + monthName[language][monthNow].substring(0,3' ' + yearNow + '</a></font>';
      }

      sHTML1 = '<span id="spanLeft" style="border:1px solid #36f;cursor:pointer" onmouseover="swapImage(\'changeLeft\',\'left2.gif\');this.style.borderColor=\'#8af\';window.status=\''+scrollLeftMessage[language]+'\'" onclick="decMonth()" onmouseout="clearInterval(intervalID1);swapImage(\'changeLeft\',\'left1.gif\');this.style.borderColor=\'#36f\';window.status=\'\'" onmousedown="clearTimeout(timeoutID1);timeoutID1=setTimeout(\'StartDecMonth()\',500)" onmouseup="clearTimeout(timeoutID1);clearInterval(intervalID1)">&nbsp<img id="changeLeft" src="'+imgDir+'left1.gif" width="10" height="11" border="0">&nbsp</span>&nbsp;';
      sHTML1 += '<span id="spanRight" style="border:1px solid #36f;cursor:pointer" onmouseover="swapImage(\'changeRight\',\'right2.gif\');this.style.borderColor=\'#8af\';window.status=\''+scrollRightMessage[language]+'\'" onmouseout="clearInterval(intervalID1);swapImage(\'changeRight\',\'right1.gif\');this.style.borderColor=\'#36f\';window.status=\'\'" onclick="incMonth()" onmousedown="clearTimeout(timeoutID1);timeoutID1=setTimeout(\'StartIncMonth()\',500)" onmouseup="clearTimeout(timeoutID1);clearInterval(intervalID1)">&nbsp<img id="changeRight" src="'+imgDir+'right1.gif" width="10" height="11" border="0">&nbsp</span>&nbsp;';
      sHTML1 += '<span id="spanMonth" style="border:1px solid #36f;cursor:pointer" onmouseover="swapImage(\'changeMonth\',\'drop2.gif\');this.style.borderColor=\'#8af\';window.status=\''+selectMonthMessage[language]+'\'" onmouseout="swapImage(\'changeMonth\',\'drop1.gif\');this.style.borderColor=\'#36f\';window.status=\'\'" onclick="popUpMonth()"></span>&nbsp;';
      sHTML1 += '<span id="spanYear" style="border:1px solid #36f;cursor:pointer" onmouseover="swapImage(\'changeYear\',\'drop2.gif\');this.style.borderColor=\'#8af\';window.status=\''+selectYearMessage[language]+'\'" onmouseout="swapImage(\'changeYear\',\'drop1.gif\');this.style.borderColor=\'#36f\';window.status=\'\'" onclick="popUpYear()"></span>&nbsp;';

      document.getElementById('caption').innerHTML = sHTML1;

      bPageLoaded=true;
    }
  }

  function hideCalendar() {
    crossobj.visibility = 'hidden';
    if (crossMonthObj != nullcrossMonthObj.visibility = 'hidden';
    if (crossYearObj  != nullcrossYearObj.visibility = 'hidden';
    showElement('SELECT');
    showElement('APPLET');
  }

  function padZero(num) {
    return (num  < 10'0' + num : num;
  }

  function constructDate(d,m,y) {
    sTmp = dateFormat;
    sTmp = sTmp.replace ('dd','<e>');
    sTmp = sTmp.replace ('d','<d>');
    sTmp = sTmp.replace ('<e>',padZero(d));
    sTmp = sTmp.replace ('<d>',d);
    sTmp = sTmp.replace ('mmmm','<p>');
    sTmp = sTmp.replace ('mmm','<o>');
    sTmp = sTmp.replace ('mm','<n>');
    sTmp = sTmp.replace ('m','<m>');
    sTmp = sTmp.replace ('<m>',m+1);
    sTmp = sTmp.replace ('<n>',padZero(m+1));
    sTmp = sTmp.replace ('<o>',monthName[language][m]);
    sTmp = sTmp.replace ('<p>',monthName2[language][m]);
    sTmp = sTmp.replace ('yyyy',y);
    return sTmp.replace ('yy',padZero(y%100));
  }

  function closeCalendar() {
    hideCalendar();
    ctlToPlaceValue.value = constructDate(dateSelected,monthSelected,yearSelected);
  }

  /*** Month Pulldown  ***/
  function StartDecMonth() {
    intervalID1 = setInterval("decMonth()",80);
  }

  function StartIncMonth() {
    intervalID1 = setInterval("incMonth()",80);
  }

  function incMonth () {
    monthSelected++;
    if (monthSelected > 11) {
      monthSelected = 0;
      yearSelected++;
    }
    constructCalendar();
  }

  function decMonth () {
    monthSelected--;
    if (monthSelected < 0) {
      monthSelected = 11;
      yearSelected--;
    }
    constructCalendar();
  }

  function constructMonth() {
    popDownYear()
    if (!monthConstructed) {
      sHTML = "";
      for (i=0; i<12; i++) {
        sName = monthName[language][i];
        if (i == monthSelected){
          sName = '<b>' + sName + '</b>';
        }
        sHTML += '<tr><td id="m' + i + '" onmouseover="this.style.backgroundColor=\'#909090\'" onmouseout="this.style.backgroundColor=\'\'" style="cursor:pointer" onclick="monthConstructed=false;monthSelected=' + i + ';constructCalendar();popDownMonth();event.cancelBubble=true"><font color="#000066">&nbsp;' + sName + '&nbsp;</font></td></tr>';
      }

      document.getElementById('selectMonth').innerHTML = '<table width="70" style="font-family:Arial;font-size:11px;border:1px solid #a0a0a0;" bgcolor="#f0f0f0" cellspacing="0" onmouseover="clearTimeout(timeoutID1)" onmouseout="clearTimeout(timeoutID1);timeoutID1=setTimeout(\'popDownMonth()\',100);event.cancelBubble=true">' + sHTML + '</table>';

      monthConstructed = true;
    }
  }

  function popUpMonth() {
    if (visMonth == 1) {
      popDownMonth();
      visMonth--;
    else {
      constructMonth();
      crossMonthObj.visibility = (dom||ie'visible' : 'show';
      crossMonthObj.left = parseInt(crossobj.left50;
      crossMonthObj.top =  parseInt(crossobj.top26;
      hideElement('SELECT', document.getElementById('selectMonth'));
      hideElement('APPLET', document.getElementById('selectMonth'));
      visMonth++;
    }
  }

  function popDownMonth() {
    crossMonthObj.visibility = 'hidden';
    visMonth = 0;
  }

  /*** Year Pulldown ***/
  function incYear() {
    for  (i=0; i<7; i++) {
      newYear  = (i + nStartingYear1;
      if (newYear == yearSelected)
        txtYear = '<span style="color:#006;font-weight:bold;">&nbsp;' + newYear + '&nbsp;</span>';
      else
        txtYear = '<span style="color:#006;">&nbsp;' + newYear + '&nbsp;</span>';
      document.getElementById('y'+i).innerHTML = txtYear;
    }
    nStartingYear++;
    bShow=true;
  }

  function decYear() {
    for  (i=0; i<7; i++) {
      newYear = (i + nStartingYear1;
      if (newYear == yearSelected)
        txtYear = '<span style="color:#006;font-weight:bold">&nbsp;' + newYear + '&nbsp;</span>';
      else
        txtYear = '<span style="color:#006;">&nbsp;' + newYear + '&nbsp;</span>';
      document.getElementById('y'+i).innerHTML = txtYear;
    }
    nStartingYear--;
    bShow=true;
  }

  function selectYear(nYear) {
    yearSelected = parseInt(nYear + nStartingYear);
    yearConstructed = false;
    constructCalendar();
    popDownYear();
  }

  function constructYear() {
    popDownMonth();
    sHTML = '';
    if (!yearConstructed) {
      sHTML = '<tr><td align="center" onmouseover="this.style.backgroundColor=\'#909090\'" onmouseout="clearInterval(intervalID1);this.style.backgroundColor=\'\'" style="cursor:pointer" onmousedown="clearInterval(intervalID1);intervalID1=setInterval(\'decYear()\',30)" onmouseup="clearInterval(intervalID1)"><font color="#000066">-</font></td></tr>';

      j = 0;
      nStartingYear =  yearSelected - 3;
      for i = (yearSelected-3); i <= (yearSelected+3); i++ ) {
        sName = i;
        if (i == yearSelectedsName = '<b>' + sName + '</b>';
        sHTML += '<tr><td id="y' + j + '" onmouseover="this.style.backgroundColor=\'#909090\'" onmouseout="this.style.backgroundColor=\'\'" style="cursor:pointer" onclick="selectYear('+j+');event.cancelBubble=true"><font color="#000066">&nbsp;' + sName + '&nbsp;</font></td></tr>';
        j++;
      }

      sHTML += '<tr><td align="center" onmouseover="this.style.backgroundColor=\'#909090\'" onmouseout="clearInterval(intervalID2);this.style.backgroundColor=\'\'" style="cursor:pointer" onmousedown="clearInterval(intervalID2);intervalID2=setInterval(\'incYear()\',30)" onmouseup="clearInterval(intervalID2)"><font color="#000066">+</font></td></tr>';

      document.getElementById('selectYear').innerHTML = '<table width="44" cellspacing="0" bgcolor="#f0f0f0" style="font-family:Arial;font-size:11px;border:1px solid #a0a0a0;" onmouseover="clearTimeout(timeoutID2)" onmouseout="clearTimeout(timeoutID2);timeoutID2=setTimeout(\'popDownYear()\',100)">' + sHTML + '</table>';

      yearConstructed = true;
    }
  }

  function popDownYear() {
    clearInterval(intervalID1);
    clearTimeout(timeoutID1);
    clearInterval(intervalID2);
    clearTimeout(timeoutID2);
    crossYearObj.visibility= 'hidden';
    visYear = 0;
  }

  function popUpYear() {
    var leftOffset
    if (visYear==1) {
      popDownYear();
      visYear--;
    else {
      constructYear();
      crossYearObj.visibility  = (dom||ie'visible' : 'show';
      leftOffset = parseInt(crossobj.left+ document.getElementById('spanYear').offsetLeft;
      if (ieleftOffset += 6;
      crossYearObj.left = leftOffset;
      crossYearObj.top = parseInt(crossobj.top26;
      visYear++;
    }
  }

  /*** calendar ***/
  function WeekNbr(n) {
    // Algorithm used:
    // From Klaus Tondering's Calendar document (The Authority/Guru)
    // http://www.tondering.dk/claus/calendar.html
    // a = (14-month) / 12
    // y = year + 4800 - a
    // m = month + 12a - 3
    // J = day + (153m + 2) / 5 + 365y + y / 4 - y / 100 + y / 400 - 32045
    // d4 = (J + 31741 - (J mod 7)) mod 146097 mod 36524 mod 1461
    // L = d4 / 1460
    // d1 = ((d4 - L) mod 365) + L
    // WeekNumber = d1 / 7 + 1

    year = n.getFullYear();
    month = n.getMonth() 1;
    if (startAt == 0) {
      day = n.getDate() 1;
    else {
      day = n.getDate();
    }

    a = Math.floor((14-month12);
    y = year + 4800 - a;
    m = month + 12 * a - 3;
    b = Math.floor(y/4- Math.floor(y/100+ Math.floor(y/400);
    J = day + Math.floor((153 * m + 25365 * y + b - 32045;
    d4 = (((J + 31741 (J % 7)) 146097365241461;
    L = Math.floor(d4 / 1460);
    d1 = ((d4 - L365+ L;
    week = Math.floor(d1/71;

    return week;
  }

  function constructCalendar () {
    var aNumDays = Array (31,0,31,30,31,30,31,31,30,31,30,31);
    var dateMessage;
    var startDate = new Date (yearSelected,monthSelected,1);
    var endDate;

    if (monthSelected==1) {
      endDate = new Date (yearSelected,monthSelected+1,1);
      endDate = new Date (endDate - (24*60*60*1000));
      numDaysInMonth = endDate.getDate();
    else {
      numDaysInMonth = aNumDays[monthSelected];
    }

    datePointer = 0;
    dayPointer = startDate.getDay() - startAt;
    
    if (dayPointer<0dayPointer = 6;

    sHTML = '<table border="0" style="font-family:verdana;font-size:10px;"><tr>';

    if (showWeekNumber == 1) {
      sHTML += '<td width="27"><b>' + weekString[language'</b></td><td width="1" rowspan="7" bgcolor="#d0d0d0" style="padding:0px"><img src="'+imgDir+'divider.gif" width="1"></td>';
    }

    for (i = 0; i<7; i++) {
      sHTML += '<td width="27" align="right"><b><font color="#000066">' + dayName[language][i'</font></b></td>';