Fancy Calendar : Calendar « GUI Components « JavaScript DHTML

JavaScript DHTML
1. Ajax Layer
2. Data Type
3. Date Time
4. Development
5. Document
6. Dojo toolkit
7. Event
8. Event onMethod
9. Ext JS
10. Form Control
11. GUI Components
12. HTML
13. Javascript Collections
14. Javascript Objects
15. Javascript Properties
16. jQuery
17. Language Basics
18. Mochkit
19. Mootools
20. Node Operation
21. Object Oriented
22. Page Components
23. Rico
24. Scriptaculous
25. Security
26. SmartClient
27. Style Layout
28. Table
29. Utilities
30. Window Browser
31. YUI Library
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
Photoshop Tutorials
Maya Tutorials
Flash Tutorials
3ds-Max Tutorials
Illustrator Tutorials
GIMP Tutorials
C# / C Sharp
C# / CSharp Tutorial
C# / CSharp Open Source
ASP.Net
ASP.NET Tutorial
JavaScript Tutorial
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
Ruby
PHP
Python
Python Tutorial
Python Open Source
SQL Server / T-SQL
SQL Server / T-SQL Tutorial
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
Flash / Flex / ActionScript
VBA / Excel / Access / Word
XML
XML Tutorial
Microsoft Office PowerPoint 2007 Tutorial
Microsoft Office Excel 2007 Tutorial
Microsoft Office Word 2007 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>';
    }

    sHTML += '</tr><tr>';
    
    if (showWeekNumber == 1) {
      sHTML += '<td align="right">' + WeekNbr(startDate'&nbsp;</td>';
    }

    for  var i=1; i<=dayPointer;i++ ) {
      sHTML += '<td>&nbsp;</td>';
    }
  
    for  datePointer=1; datePointer <= numDaysInMonth; datePointer++ ) {
      dayPointer++;
      sHTML += '<td align="right">';
      sStyle=styleAnchor;
      if ((datePointer == odateSelected&& (monthSelected == omonthSelected&& (yearSelected == oyearSelected))
      sStyle+=styleLightBorder }

      sHint = '';
      for (k = 0;k < HolidaysCounter; k++) {
        if ((parseInt(Holidays[k].d== datePointer)&&(parseInt(Holidays[k].m== (monthSelected+1))) {
          if ((parseInt(Holidays[k].y)==0)||((parseInt(Holidays[k].y)==yearSelected)&&(parseInt(Holidays[k].y)!=0))) {
            sStyle+= 'background-color:#fdd;';
            sHint += sHint=="" ? Holidays[k].desc : "\n"+Holidays[k].desc;
          }
        }
      }

      sHint = sHint.replace('/\"/g', '&quot;');

      dateMessage = 'onmousemove="window.status=\''+selectDateMessage[language].replace('[date]',constructDate(datePointer,monthSelected,yearSelected))+'\'" onmouseout="window.status=\'\'" ';


      //////////////////////////////////////////////
      //////////  Modifications PinoToy  //////////
      //////////////////////////////////////////////
      if (enablePast == && ((yearSelected < yearNow|| (monthSelected < monthNow&& (yearSelected == yearNow|| (datePointer < dateNow&& (monthSelected == monthNow&& (yearSelected == yearNow))) {
        selDayAction = '';
        isPast = 1;
      else {
        selDayAction = 'href="javascript:dateSelected=' + datePointer + ';closeCalendar();"';
        isPast = 0;
      }

      if ((datePointer == dateNow&& (monthSelected == monthNow&& (yearSelected == yearNow)) {  ///// today
        sHTML += "<b><a "+dateMessage+" title=\"" + sHint + "\" style='"+sStyle+"' "+selDayAction+"><font color=#ff0000>&nbsp;" + datePointer + "</font>&nbsp;</a></b>";
      else if (dayPointer % == (startAt * -1)+1) {                  ///// SI ES DOMINGO
        if (isPast==1)
          sHTML += "<a "+dateMessage+" title=\"" + sHint + "\" style='"+sStyle+"' "+selDayAction+">&nbsp;<font color=#909090>" + datePointer + "</font>&nbsp;</a>";
        else
          sHTML += "<a "+dateMessage+" title=\"" + sHint + "\" style='"+sStyle+"' "+selDayAction+">&nbsp;<font color=#54A6E2>" + datePointer + "</font>&nbsp;</a>";
      else if ((dayPointer % == (startAt * -1)+&& startAt==1|| (dayPointer % == startAt && startAt==0)) {  ///// SI ES SABADO
        if (isPast==1)
          sHTML += "<a "+dateMessage+" title=\"" + sHint + "\" style='"+sStyle+"' "+selDayAction+">&nbsp;<font color=#909090>" + datePointer + "</font>&nbsp;</a>";
        else
          sHTML += "<a "+dateMessage+" title=\"" + sHint + "\" style='"+sStyle+"' "+selDayAction+">&nbsp;<font color=#54A6E2>" + datePointer + "</font>&nbsp;</a>";
      else {                                      ///// CUALQUIER OTRO DIA
        if (isPast==1)
          sHTML += "<a "+dateMessage+" title=\"" + sHint + "\" style='"+sStyle+"' "+selDayAction+">&nbsp;<font color=#909090>" + datePointer + "</font>&nbsp;</a>";
        else
          sHTML += "<a "+dateMessage+" title=\"" + sHint + "\" style='"+sStyle+"' "+selDayAction+">&nbsp;<font color=#000066>" + datePointer + "</font>&nbsp;</a>";
      }

      sHTML += '';
      if ((dayPointer+startAt== startAt) {
        sHTML += '</tr><tr>';
        if ((showWeekNumber == 1&& (datePointer < numDaysInMonth)) {
          sHTML += '<td align="right">' + (WeekNbr(new Date(yearSelected,monthSelected,datePointer+1))) '&nbsp;</td>';
        }
      }
    }

    document.getElementById('content').innerHTML   = sHTML
    document.getElementById('spanMonth').innerHTML = '&nbsp;' +  monthName[language][monthSelected'&nbsp;<img id="changeMonth" src="'+imgDir+'drop1.gif" width="12" height="10" border="0">'
    document.getElementById('spanYear').innerHTML  = '&nbsp;' + yearSelected  + '&nbsp;<img id="changeYear" src="'+imgDir+'drop1.gif" width="12" height="10" border="0">';
  }

  function showCalendar(ctl, ctl2, format, lang, past, fx, fy) {
    if (lang != null && lang != '') language = lang;
    if (past != nullenablePast = past;
    else enablePast = 0;
    if (fx != nullfixedX = fx;
    else fixedX = -1;
    if (fy != nullfixedY = fy;
    else fixedY = -1;

    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>';
    }
    popUpCalendar(ctl, ctl2, format);
  }

  function popUpCalendar(ctl, ctl2, format) {
    var leftpos = 0;
    var toppos  = 0;

    if (bPageLoaded) {
      if (crossobj.visibility == 'hidden') {
        ctlToPlaceValue = ctl2;
        dateFormat = format;
        formatChar = ' ';
        aFormat = dateFormat.split(formatChar);
        if (aFormat.length < 3) {
          formatChar = '/';
          aFormat = dateFormat.split(formatChar);
          if (aFormat.length < 3) {
            formatChar = '.';
            aFormat = dateFormat.split(formatChar);
            if (aFormat.length < 3) {
              formatChar = '-';
              aFormat = dateFormat.split(formatChar);
              if (aFormat.length < 3) {
                formatChar = '';          // invalid date format

              }
            }
          }
        }

        tokensChanged = 0;
        if (formatChar != "") {
          aData =  ctl2.value.split(formatChar);      // use user's date

          for (i=0; i<3; i++) {
            if ((aFormat[i== "d"|| (aFormat[i== "dd")) {
              dateSelected = parseInt(aData[i]10);
              tokensChanged++;
            else if ((aFormat[i== "m"|| (aFormat[i== "mm")) {
              monthSelected = parseInt(aData[i]101;
              tokensChanged++;
            else if (aFormat[i== "yyyy") {
              yearSelected = parseInt(aData[i]10);
              tokensChanged++;
            else if (aFormat[i== "mmm") {
              for (j=0; j<12; j++) {
                if (aData[i== monthName[language][j]) {
                  monthSelected=j;
                  tokensChanged++;
                }
              }
            else if (aFormat[i== "mmmm") {
              for (j=0; j<12; j++) {
                if (aData[i== monthName2[language][j]) {
                  monthSelected = j;
                  tokensChanged++;
                }
              }
            }
          }
        }

        if ((tokensChanged != 3|| isNaN(dateSelected|| isNaN(monthSelected|| isNaN(yearSelected)) {
          dateSelected  = dateNow;
          monthSelected = monthNow;
          yearSelected  = yearNow;
        }

        odateSelected  = dateSelected;
        omonthSelected = monthSelected;
        oyearSelected  = yearSelected;

        aTag = ctl;
        do {
          aTag     = aTag.offsetParent;
          leftpos += aTag.offsetLeft;
          toppos  += aTag.offsetTop;
        while (aTag.tagName != 'BODY');

        crossobj.left = (fixedX == -1? ctl.offsetLeft + leftpos : fixedX;
        crossobj.top = (fixedY == -1? ctl.offsetTop + toppos + ctl.offsetHeight + : fixedY;
        constructCalendar (1, monthSelected, yearSelected);
        crossobj.visibility = (dom||ie"visible" "show";

        hideElement('SELECT', document.getElementById('calendar'));
        hideElement('APPLET', document.getElementById('calendar'));      

        bShow = true;
      else {
        hideCalendar();
        if (ctlNow!=ctlpopUpCalendar(ctl, ctl2, format);
      }
      ctlNow = ctl;
    }
  }

  document.onkeypress = function hidecal1 () {
    if (event.keyCode == 27hideCalendar();
  }
  document.onclick = function hidecal2 () {
    if (!bShowhideCalendar();
    bShow = false;
  }

  if(ie) {
    init();
  else {
    window.onload = init;
  }
</script>

<style type="text/css">
  body{
    color: black;
    font-size: 11px;
  }
  ADDRESS,BLOCKQUOTE,BODY,CAPTION,CENTER,DD,DIR,DIV,DL,DT,FORM,H1,H2,H3,H4,H5,H6,INPUT,MENU,OL,P,SELECT,TD,TEXTAREA,TH,UL{
    color: black;
    font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
  }
</style>
</head>

<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->

<body>


<!-- This script and many more are available free online at -->

<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Original:  Tan Ling Wee -->

<!-- Web Site:  http://64.246.32.44/~admin59/index.htm  -->

  <h3>Demonstration # 1</h3>

    This demonstration caters for Netscape 4, but showing the date value in a text box. The trigger is a button, and the data container is the text box.<br><br>

    <blockquote>
    <form name='mainform' method='post'>

      <input type=text name='datevalue' size=10 maxlength=10 value='25/07/2003'>

      <script language='javascript'>
      <!--

        if (!document.layers) {

          document.write("<input type=button onclick='showCalendar(this, mainform.datevalue, \"dd/mm/yyyy\",null,0,15,150)' value='select' style='font-size:11px'>")

        }

      //-->
      </script>

    </form>
    </blockquote>
    <br />
    <br />

  <h3>Demonstration # 2</h3>

    The following demonstration uses a button as both a trigger and data container. Selected language is german.<br />
    <font color='#a0a0a0'>(You will not see anything below if you are using Netscape Navigator 4)</font>
    <blockquote>

      <input style='font-size:11px' type=button value="28.07.2003" onclick='showCalendar(this, this, "dd.mm.yyyy","de",1)'>

    </blockquote>

</body>
</html>

           
         
  
popupcal.zip( 8 k)
Related examples in the same category
1. HTML Calendar based on DynAPI
2. JavaScript Date Picker based on ComboBox
3. Calendar Control - Single-Select Implementation
4. Calendar Control - 2-Up Implementation
5. Calendar Control - Handling onSelect / onDeselect
6. Calendar Control - Mix/Max Implementation
7. Calendar Control - Multi-Select Implementation
8. Calendar Control - Multi-Select 2-up Implementation
9. Calendar Control - Custom Renderer Example (Holiday Renderer Implementation)
10. Calendar Control - Date Restriction Example (Date Restriction Implementation)
11. Calendar Control - Row Highlight Example (Row Highlight Implementation)
12. Popup calendar
13. Month Calendar
14. Popup Calendar for a textfield
15. Multiselection Calendar
16. Free Date Picker : An easy plugin to add a date picker (calendar) in your web site
17. HTML Date Picker
18. Date Picker in new window
19. All browser Calendar
20. DHTML Calendar for the impatient
21. Calendar: special day
22. Calendar: day info
23. Calendar: Multiple day selection
24. Calendar with different theme
25. Calendar with image for each month
26. Another Calendar
27. Date Time Picker
28. Month Calendar (2)
29. Building a Calculator
30. A Dynamic Calendar Table
31. Dynamic HTML Calendar
32.  A Static Calendar by JavaScript
33. Displaying the Calendar
34. Calendar (IE only)
35. Calendar in slide tab
36. Another DHTML Calendar
37. Event Calendar
38. Open calendar
39. swazz calendar 1.0
40. jquery calendar
www.java2java.com | Contact Us
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.