SoFunction
Updated on 2025-03-10

JS Calendar Recommended


/*********************** 

* Create an object  var c = new Calendar("c"); (c);
* Calling method (arg1,arg2,arg3)
* Parameter 1: Text input box (required). For example, onfocus="(this)";
* Parameter 2: Button or other HTML elements that can be used for click events (required if using buttons).
For example, onclick="(this,(*))" *=Text input box name
* Parameter 3: If there is no text box and no value, use this value to initialize the calendar (optional).
Like onfocus="(this,'2006-01-01')

* Note: The parameter order is indefinitely ordered. The test passed under MSIE6/Opera8/FireFox1.5

  

***If you use this calendar control, please keep this information. Thank you! ****
*  
* Email:caoailin@ 
* QQ:38062022 
* Creation date: 2006-11-22 
************************************/ 

function Calendar(objName)  

 = { 

borderColor    : "#909eff",//Border color
headerBackColor   : "#909EFF", //Table header background color
headerFontColor   : "#ffffff",//Table header font color
bodyBarBackColor  : "#f4f4f4", //Calendar title background color
bodyBarFontColor  : "#000000", //Calendar title font color
bodyBackColor   : "#ffffff", //Calendar background color
bodyFontColor      : "#000000", //Calendar Font Color
bodyHolidayFontColor   : "#ff0000",//Holiday font color
watermarkColor   : "#d4d4d4", //Background watermark color
  moreDayColor       : "#cccccc" 

}; 

= false; //Whether to display the dates of the previous month and the next month?

 = objName; 
 = null; 

 = null; 
 = null; 
 = null; 

}; 

 = function() 
{  
  var str = (); 
  str += '<div Author="alin" class="calendar" style="display:none;" onselectstart="return false" oncontextmenu="return false" >\n'; 
  str += '<div Author="alin" class="cdrWatermark" ></div><div  style="position:absolute;left:0px;top:0px;z-index:2;width:140px;">'; 
  str += (); 
  str += ();  
  str += '</div><div Author="alin"  style="position:absolute;left:0px;top:0px;z-index:3;display:none;" onmouseover="' +  + '.showMenu(null);" onmouseout="' +  + '.hideMenu();"></div></div>'; 
  return str; 
}; 

 = function() 

  var str = '<style type="text/css">\n'; 
str += '.calendar{position:absolute;width:140px!important;width /**/:142px;height:184px!important;height /**/:174px;background-color:'++';border:1px solid ' +  + ';left:0px;top:0px;z-index:9999;}\n'; 
str += '.cdrHeader{background-color:'+  +';width:140px;height:22px;font-size:12px;color:'++';}\n'; 
str += '.cdrWatermark{position:absolute;left:0px;top:55px;width:140px;font-family: Arial Black;font-size:50px;color:'++';z-index:1;text-align:center;}\n'; 
str += '.cdrBodyBar{background-color:' +  + ';font-size:12px;color:' +  + ';width:140px;height:20px;}\n'; 
str += '.cdrBody{width:140px;height:122px!important; height /**/:110px;font-size:12px;cursor:pointer;color:' +  + ';}\n'; 
str += '.dayOver{height:16px;padding:0px;border:1px solid black;background-color:#f4f4f4;}\n'; 
str += '.dayOut{padding:1px;border:none;height:16px;}\n'; 
  str += '.menuOver{background-color:'++';color:'++';font-size:12px;}\n'; 
str += '.headerOver{border:1px solid black;background-color:#f4f4f4;color:black;cursor:default;}\n'; 
str += '.cdrMenu{font-size:12px;border:1px solid #000000;background-color:#ffffff;cursor:default;width:100%}\n'; 
str += 'html>body #Calendar{width:142px;174px;}'; 
str += '</style>\n'; 
return str; 

}; 

 = function() 

  var str = '<table Author="alin" class="cdrHeader" cellSpacing="2" cellPadding="0"><tr Author="alin" align="center">\n'; 
str += '<td Author="alin" onmouseover="=\'headerOver\'" onmouseout="=\'\'"  title="Previous Year" style="cursor:pointer;width:10px;" onclick="'++'.onChangeYear(false);"><<</td>\n';
str += '<td Author="alin" onmouseover="=\'headerOver\'" onmouseout="=\'\'"  title="Previous Month" style="cursor:pointer;width:10px;" onclick="'++'.onChangeMonth(false);"><</td>\n';
str += '<td Author="alin" onmouseover="=\'headerOver\'"  style="width:50px;" onclick="' +  + '.showMenu(true);" onmouseout="' +  + '.hideMenu();=\'\';">0</td>\n'; 
str += '<td Author="alin" onmouseover="=\'headerOver\'"  onclick="' +  + '.showMenu(false);" onmouseout="' +  + '.hideMenu();=\'\';">0</td>\n'; 
str += '<td Author="alin" onmouseover="=\'headerOver\'" onmouseout="=\'\'"  title="next month" style="cursor:pointer;width:10px;" onclick="'++'.onChangeMonth(true);">></td>\n';
str += '<td Author="alin" onmouseover="=\'headerOver\'" onmouseout="=\'\'"  title="Next Year" style="cursor:pointer;width:10px;" onclick="'++'.onChangeYear(true);">>></td></tr>\n';
str += '</table>\n'; 
return str; 
}; 

 = function() 

  var n = 0; 
  var str = (); 
  str += '<table Author="alin" class="cdrBody" cellSpacing="2" cellPadding="0">\n';  
  for(i = 0; i < 6; i++) 
{   
  str += '<tr Author="alin" align="center">'; 
for(j = 0; j < 7; j++) 

str += '<td Author="alin" class="dayOut"  width="13%"></td>\n'; 

str += '</tr>'; 

  str += '</table>\n'; 
str += '<table Author="alin" class="cdrBodyBar" cellSpacing="2" cellPadding="0"><tr align="center" Author="alin"><td Author="alin" style="cursor:pointer;" onclick="'++'.getToday();">Today: '+new Date().toFormatString("yyyy year mm month ddday")+'</td></tr></table>\n';
  return str; 
}; 

 = function() 

  var str = '<table Author="alin_bar"  class="cdrBodyBar" style="cursor:move;" cellSpacing="2" cellPadding="0"><tr Author="alin_bar" align="center">\n'; 
var day = new Array('day','one','two','three','four','five','six');
  for(i = 0; i < 7; i++) 
  { 
   str += '<td Author="alin_bar">' + day[i] + '</td>\n';   
  } 
  str += '</tr></table>'; 
  return str;  


 = function(year) 


  var str = '<table Author="alin" cellSpacing="0" class="cdrMenu" cellPadding="0">\n'; 
  for(i = 0; i < 10; i++) 
{   
  var _year = year + i; 
var _date = new Date(_year,(),()); 

  str += '<tr Author="alin" align="center"><td Author="alin" width="13%" height="16" '; 
if(() != _year) 

str += 'onmouseover="=\'menuOver\'" onmouseout="=\'\'" '; 

else 

  str += 'class="menuOver"'; 

str += 'onclick="' +  + '.bindDate(\'' + _date.toFormatString("-") + '\')">' + _year + 'year</td>\n';
str += '</tr>'; 


  str += '<tr Author="alin" align="center"><td Author="alin"><table Author="alin" style="font-size:12px;width:100%;" cellSpacing="0" cellPadding="0">\n'; 
  str += '<tr Author="alin" align="center"><td Author="alin" onmouseover="=\'menuOver\'" onmouseout="=\'\'" onclick="'++'.getYearMenu('+ (year - 10) + ')"><<</td>\n'; 
  str += '<td Author="alin" onmouseover="=\'menuOver\'" onmouseout="=\'\'" onclick="'++'.getYearMenu('+ (year + 10) +')">>></td><tr>\n'; 
  str += '</table></td></tr>\n'; 
  str += '</table>'; 

  var _menu = getObjById("cdrMenu"); 
_menu.innerHTML = str; 

}; 

 = function() 


  var str = '<table Author="alin" cellSpacing="0" class="cdrMenu" cellPadding="0">\n'; 
  for(i = 1; i <= 12; i++) 
{  
var _date = new Date((),i-1,()); 

str += '</tr><tr Author="alin" align="center"><td Author="alin" height="16" '; 
if(() + 1 != i) 

str += 'onmouseover="=\'menuOver\'" onmouseout="=\'\'" '; 

else 

  str += 'class="menuOver"'; 

str += 'onclick="' +  + '.bindDate(\'' + _date.toFormatString("-") + '\')">'+i+'month</td></tr>\n';

  str += '</table>'; 

  var _menu = getObjById("cdrMenu"); 
_menu.innerHTML = str;  
}; 

 = function() 

  if ( > 3 ||  == 0) 
  { 
alert("Sorry! The incoming parameters are incorrect!");
 return; 
}  

  var _date = null; 
  var _evObj = null; 
  var _initValue = null  

  for(i = 0; i < ; i++) 
  { 
   if(typeof(arguments[i]) == "object" && arguments[i].type == "text") 
  {_date = arguments[i];} 
 else if(typeof(arguments[i]) == "object") 
  {_evObj = arguments[i];} 
 else if(typeof(arguments[i]) == "string") 
  {_initValue = arguments[i];}  
  } 
  _evObj = _evObj || _date; 
inputObj = _date; 
targetObj = _evObj 

if(!_date){alert("Incoming parameter error!"); return;}

   = _date; 

  _date = _date.value; 

  if(_date == "" && _initValue) _date = _initValue;  

  (_date);     

  var _target = getPosition(_evObj);  
  var _obj = getObjById("Calendar"); 
  _obj. = ""; 

  
  _obj. = _target.x + 'px'; 
  if(( - (_target.y + _evObj.clientHeight)) >= _obj.clientHeight) 
  {     
   _obj. = (_target.y + _evObj.clientHeight) + 'px'; 

else 
{   
    _obj. = (_target.y - _obj.clientHeight) + 'px'; 


}; 


 = function() 

  var obj = getObjById("Calendar"); 
 = "none";  
}; 

 = function(date) 


var _monthDays = new Array(31,30,31,30,31,30,31,31,30,31,30,31); 
var _arr = ('-'); 
  var _date = new Date(_arr[0],_arr[1]-1,_arr[2]); 
if(isNaN(_date)) _date = new Date(); 
 = _date; 
(); 

var _year = _date.getFullYear(); 
var _month = _date.getMonth(); 
var _day = 1; 

var _startDay = new Date(_year,_month,1).getDay(); 
var _previYear = _month == 0 ? _year - 1 : _year; 
var _previMonth = _month == 0 ? 11 : _month - 1; 
var _previDay = _monthDays[_previMonth]; 
if (_previMonth == 1) _previDay =((_previYear%4==0)&&(_previYear%100!=0)||(_previYear%400==0))?29:28; 
_previDay -= _startDay - 1; 
var _nextDay = 1; 

_monthDays[1] = ((_year%4==0)&&(_year%100!=0)||(_year%400==0))?29:28; 

for(i = 0; i < 40; i++) 

  var _dayElement = getObjById("cdrDay" + i); 

_dayElement.onmouseover = Function( + ".onMouseOver(this)"); 
_dayElement.onmouseout = Function( + ".onMouseOut(this)"); 
_dayElement.onclick = Function( + ".onClick(this)"); 
(_dayElement); 
_dayElement. = ""; 

if(i < _startDay) 

//Get the date of the previous month
if() 

  var _previDate = new Date(_year,_month - 1,_previDay); 
  _dayElement.innerHTML = _previDay; 
_dayElement.title = _previDate.toFormatString("yyyy year mm month dd day");
    _dayElement.value = _previDate.toFormatString("-"); 
  _dayElement. = ; 

    _previDay++; 

}else 

  _dayElement.innerHTML = ""; 
    _dayElement.title = ""; 



else if(_day > _monthDays[_month]) 

//Get the date of next month
  if() 

 var _nextDate = new Date(_year,_month + 1,_nextDay); 
 _dayElement.innerHTML = _nextDay; 
_dayElement.title = _nextDate.toFormatString("yyyy year mm month dd day");
   _dayElement.value = _nextDate.toFormatString("-"); 
 _dayElement. = ; 

   _nextDay++;   
}else 

  _dayElement.innerHTML = ""; 
    _dayElement.title = ""; 


else if(i >= new Date(_year,_month,1).getDay() && _day <= _monthDays[_month]) 

//Get the date of this month
  _dayElement.innerHTML = _day; 

  if(_day == _date.getDate()) 
  { 
   (_dayElement); 
 _dayElement.onmouseover = Function("");  
   _dayElement.onmouseout = Function("");      
  } 

   
  if((_year,_month,_day)) 
  { 
   _dayElement. = ;   
  } 
  var _curDate = new Date(_year, _month, _day); 
_dayElement.title = _curDate.toFormatString("yyyy year mm month dd day");
  _dayElement.value = _curDate.toFormatString("-"); 

  _day++; 


else 

  _dayElement.innerHTML = ""; 
  _dayElement.title = ""; 




var _menu = getObjById("cdrMenu"); 
_menu. = "none"; 

}; 


 = function() 

  var _curYear = getObjById("currentYear"); 
  var _curMonth = getObjById("currentMonth"); 
  var _watermark = getObjById("cdrWatermark"); 

_curYear.innerHTML = ("yyyyy year");
_curMonth.innerHTML = ("mm month");
  _watermark.innerHTML = ();   

}; 

 = function() 

  var _date = new Date(); 
  (_date.toFormatString("-")); 
}; 

 = function(year,month,date) 

  var _date = new Date(year,month,date); 
  return (_date.getDay() == 6 || _date.getDay() == 0); 
}; 

 = function(obj) 

   = "dayOver"; 
}; 


 = function(obj) 

   = "dayOut"; 
}; 

 = function(obj) 
{  
 if( != "")  = ; 
 (); 
}; 

 = function(isnext) 

  var _year = (); 
  var _month = () + 1; 
  var _date = (); 

  if(_year > 999 && _year <10000) 
  { 
    if(isnext){_year++;}else{ _year --;} 
  } 
  else 
  { 
alert("Year out of range (1000-9999)!");
  } 
  (_year + '-' + _month + '-' + _date); 
}; 

 = function(isnext) 

  var _year = (); 
  var _month = () + 1; 
  var _date = (); 

  if(isnext){ _month ++;} else {_month--;} 

  if(_year > 999 && _year <10000) 
  { 
    if(_month < 1) {_month = 12; _year--;} 
if(_month > 12) {_month = 1; _year++;} 
  } 
  else 
  { 
alert("Year out of range (1000-9999)!");
  }  

  (_year + '-' + _month + '-' + _date); 
}; 

 = function(isyear) 

 var _menu = getObjById("cdrMenu"); 

 if(isyear != null) 
 { 

var _obj = (isyear)? getObjById("currentYear") : getObjById("currentMonth"); 

if(isyear) 

  (() - 5);   

else 

  ();   


_menu. = (_obj.offsetTop + _obj.offsetHeight) + 'px'; 
_menu. = _obj.offsetLeft + 'px'; 
_menu. = _obj.offsetWidth + 'px'; 

  } 

if ( != null) clearTimeout(); 

_menu.=""; 



 = function() 

  var _obj = getObjById("cdrMenu"); 
   = (function(){_obj.='none';},500); 


.NaN0 = function() 

  return isNaN(this) ? 0 : this; 


 = function(fs) 

  if( == 1) 
  { 
   return () + fs + (() + 1) + fs + (); 
  } 
  fs = ("yyyy",()); 
  fs = ("mm",(() + 1)); 
  fs = ("dd",()); 
  return fs; 


/*********************************************************************************************/
var inputObj = null; //Input object
var targetObj = null; //Click on the target object
var dragObj = null; //Drag the target object
var mouseOffset = null; //Drag the target position

//Get the object
function getObjById(obj) 

  if() 
  { 
   return (obj); 
  } 
  else 
  { 
alert("The browser does not support it!");
  } 


//Get the mouse position
function mouseCoords(ev) 

if( || ){ 
return {x:, y:}; 

return { 
x: +  - , 
y: +  -  
}; 


//Get the absolute position of the target
function getPosition(e) 

var left = 0; 
var top = 0; 
while (){ 
left +=  + (?(parseInt()).NaN0():0); 
top +=  + (?(parseInt()).NaN0():0); 
e   = ; 


left +=  + (?(parseInt()).NaN0():0); 
top +=  + (?(parseInt()).NaN0():0); 

return {x:left, y:top}; 

//Get the offset value of the mouse
function getMouseOffset(target, ev) 

ev = ev || ; 
var docPos  = getPosition(target); 
var mousePos = mouseCoords(ev); 
return {x: - , y: - }; 


//Close the calendar
function closeCalendar(evt){ 

evt = evt || ; 
var _target=  || ; 

if(!_target.getAttribute("Author") && _target != inputObj && _target != targetObj) 

  getObjById("Calendar"). = "none";   
}  

//Drag the calendar to start
function dragStart(evt){ 

  evt = evt || ; 
var _target=  || ; 

if(_target.getAttribute("Author") == "alin_bar") 
{   
  dragObj = getObjById("Calendar");   
  mouseOffset = getMouseOffset(dragObj, evt); 

}  

//Drag the calendar
function drag(evt) 

  evt = evt || ; 
if(dragObj) 
{   
 var mousePos = mouseCoords(evt); 
  = ( - ) + 'px'; 
  = ( - ) + 'px';   


//Drag ends
function dragEnd(evt) 

  dragObj = null;   


/***end Public Method***************/


 = closeCalendar; 

 = dragStart; 

 = drag; 

 = dragEnd; 


/*****************Finish********************/