功能介绍：
1.正常的日历功能。
2.等等等
3.接收 数组
例如：
复制代码 代码如下:
new calendar(id).show(
{
20091120: 今天干了嘛嘛。。。,
2009320: 今天干了嘛嘛。。。
}
);
日历提示样式分为3类。
a. 当日
b.当年当月当日提示样式
c.当月当日提示样式
鼠标覆盖在有提示的日期上自动出现提示内容
4.。。。。。
主要分为2种用处。
1.提供一个 div 或其他 element 将该容器的 id 传给 calendar。方法名为: show()
例: var cr = calendar(div1);
cr.show( /*data - 该数组为可选项，如果传则有提示功能*/ );
2.提供一个 input[type='text'] 的元素 将该元素的 id 传给 calendar。方法名为: pop()
例: var cr = calendar(input2);
cr.pop();
其他的就不多说了。觉得好的话，就支持下。呵呵。
有什么问题或好的想法，请告诉我。谢谢
详细的用法和例子在压缩包里有。
演示地址
http://img.jb51.net/online/calendar/demo-1.html
http://img.jb51.net/online/calendar/demo-2.html
打包下载地址 http://www.jb51.net/codes/12595.html
复制代码 代码如下:
/*
* calendar
* language 0: chinese, 1: english
* 1.put calendar into the element html use 'show()'
* 2.pop-up calendar use 'pop()'
*/
var calendar = function( instanceid, language, startyear, endyear ){
if( typeof instanceid == string ){
this.date = new date();
this.year = this.date.getfullyear();
this.month = this.date.getmonth();
this.week = this.date.getday();
this.today = this.date.getdate();
this.instanceid = instanceid;
this.language = language || 1;
this.startyear = startyear || this.year - 5;
this.endyear = endyear || this.year + 1;
// if instance is input[type='text'] object
this.popcontainer_id = 'popcalendarcontainer';
// message store
this.msgstore = [];
this.calecontainer_id = 'calendarcontainer';
this.caletop = {
today_view_id: 'calendartodayview',
week_view_id: 'calendarweekview',
lq_year_id: 'linkquickyear',
lq_month_id: 'linkquickmonth',
sq_year_id: 'selectquickyear',
sq_month_id: 'selectquickmonth',
close_id: 'calendarclose',
prev_month_id: 'toprevmonth',
back_today_id: 'backtoday',
next_month_id: 'tonextmonth'
}
this.dayscontainer_id = 'calendardayscontainer';
this.msgcontainer_id = 'calendartipscontainer';
this.curdayclass = 'calendarcurrentday';
this.tipdayclass = 'calendartipday';
this.oldtipdayclass = 'calendaroldtipday';
}
};
/* calendar language */
calendar.lang = {
weeks: [
[星期天, 星期一, 星期二, 星期三, 星期四, 星期五, 星期六],
[sunday, monday, tuesday, wednesday, thursday, friday, saturday]
],
weeksmenu:[
[日,一,二,三,四,五,六],
[sun,mon,tur,wed,thu,fri,sat]
]
};
/* create calendar element */
calendar.prototype._getviewelement = function(){
// create page html element
var caleelem = ;
// create start
caleelem+= '';
//
caleelem+= '';
// top day view
caleelem+= ' ';
// link or select control
caleelem+= '';
caleelem+= '
';
caleelem+= '';
caleelem+= '';
caleelem+= '';
caleelem+= '';
caleelem+= '';
caleelem+= ' ';
caleelem+= '. ';
caleelem+= '';
caleelem+= '';
caleelem+= '';
caleelem+= ' ';
caleelem+= '
';
caleelem+= '
';
caleelem+= ' ';
// quick control
caleelem+= '';
caleelem+= '';
caleelem+= 'x';
caleelem+= '
';
caleelem+= '';
caleelem+= '«';
caleelem+= ' ';
caleelem+= '»';
caleelem+= '
';
caleelem+= ' ';
caleelem+= '
cellpadding=0 cellspacing=0>
';
//
//
caleelem+= '';
// week menu
caleelem+= '';
for(var i = 0; i caleelem+= ''+calendar.lang[weeksmenu][this.language][i]+'';
}
caleelem+= '
';
// days view
caleelem+= '';
for(var tr = 0; tr caleelem+= '';
for(var td = 0; td caleelem+= ' ';
}
caleelem+= '
';
}
caleelem+= '
';
caleelem+= '
';
// view>
caleelem+= '
';
//
caleelem+= '
';
// msg>
// create end
return caleelem;
};
/* get month data */
calendar.prototype._getmonthviewarray = function( year, month ){
var montharray = [];
// from the beginning day of the week
var begindayofweek = new date( year, month, 1).getday();
// this month total days
var daysofmonth = new date( year, month + 1, 0).getdate();
// 42: 7*6 matrix
for( var i = 0; i montharray[i] = ;
for( var j = 0; j montharray[j + begindayofweek] = j + 1 ;
return montharray;
};
/* search the index of option in the select */
calendar.prototype._getoptionindex = function( selectobject, value ){
for( var j = 0; j if( value == selectobject.options[j].value )
return j;
}
};
/* bind year data into 'year select' */
calendar.prototype._bindyearintoselect = function(){
var oyear = this.find( this.caletop.sq_year_id );
var oyearlen = 0;
for( var i = this.startyear; i oyear.options[oyearlen] = new option( i , i );
};
/* bind month data into 'month select' */
calendar.prototype._bindmonthintoselect = function(){
var omonth = this.find( this.caletop.sq_month_id );
var omonthlen = 0;
for( var i = 0; i omonth.options[omonthlen] = new option( i + 1 , i + 1 );
};
/* bind data */
calendar.prototype._bindalldata = function( curyear, curmonth ){
var cr = this;
// bind default data into 'select:year'
this._bindyearintoselect();
// bind default data into 'select:month'
this._bindmonthintoselect();
// change the 'select:year' and 'select:month' value
this.changeselectvalue( curyear, curmonth );
// bind default data into 'current day view and current week view'
this.find( this.caletop.week_view_id ).innerhtml = calendar.lang['weeks'][this.language][this.week];
this.find( this.caletop.today_view_id ).innerhtml = this.today;
// get days and bind into 'calendarmain'
// add current day class and mouse event
var daysofmontharray = this._getmonthviewarray( curyear, curmonth );
var spans = this.find( this.dayscontainer_id, span );
var curymd = this.year + + ( this.month + 1 ) + + this.today;
var selectyear = this.find( this.caletop.sq_year_id ).value;
var selectmonth = this.find( this.caletop.sq_month_id ).value;
for( var i = 0; i spans[i].innerhtml = daysofmontharray[i];
var selectymd = selectyear + + selectmonth + + spans[i].innerhtml;
if( curymd == selectymd )
spans[i].classname = this.curdayclass;
else
spans[i].classname = ;
}
// if not some days has pop message
if( this.msgstore != )
this._initpopmsg( this.msgstore );
}
/* bind event */
calendar.prototype._bindallevent = function(){
var cr = this;
// 'toprevmonth, tonextmonth, backtoday, today view' event
this.find( this.caletop.prev_month_id ).onclick = function(){ cr.goprevornextmonth(this); };
this.find( this.caletop.next_month_id ).onclick = function(){ cr.goprevornextmonth(this); };
this.find( this.caletop.back_today_id ).onclick = function(){ cr.backtoday(); };
this.find( this.caletop.today_view_id ).onclick = function(){ cr.backtoday(); };
// 'year and month select' onchange event
this.find( this.caletop.sq_year_id ).onchange = function(){ cr.updateselect(); };
this.find( this.caletop.sq_month_id ).onchange = function(){ cr.updateselect(); };
// quick link event
this.find( this.caletop.lq_year_id ).onclick = function(){
cr.showhide( cr.caletop.lq_year_id, none );
cr.showhide( cr.caletop.sq_year_id, block );
};
this.find( this.caletop.lq_month_id ).onclick = function(){
cr.showhide( cr.caletop.lq_month_id, none );
cr.showhide( cr.caletop.sq_month_id, block );
};
// remove the link dotted line
var olink = this.find( this.calecontainer_id, a )
for( var i = 0; i olink[i].onfocus = function(){ this.blur(); }
}
}
/* bind calendar for calendar view */
calendar.prototype._initcalendar = function(){
this._bindallevent();
this._bindalldata( this.year, this.month );
};
/* change the quick select value */
calendar.prototype.changeselectvalue = function( year, month ){
var ymarray = [], selectarray = [], linkarray = [];
// store the 'year' and 'month' to array
ymarray[0] = year; ymarray[1] = month + 1;
// store the 'selectyear_id' and 'selectmonth_id' to array
selectarray[0] = this.caletop.sq_year_id; selectarray[1] = this.caletop.sq_month_id;
linkarray[0] = this.caletop.lq_year_id; linkarray[1] = this.caletop.lq_month_id;
for( var i = 0; i var selectobject = this.find( selectarray[i] );
// get the return index
var index = this._getoptionindex( selectobject, ymarray[i] );
// reset the 'year', 'month' select and link value
selectobject.options[index].selected = selected;
this.find( linkarray[i] ).innerhtml = selectobject.value;
}
this.resetlinkselect();
};
/* search next or previons month */
calendar.prototype.goprevornextmonth = function( obj ){
var curmonthselect = this.find( this.caletop.sq_month_id );
var curmonth = parseint( curmonthselect.value );
var curyear = this.find( this.caletop.sq_year_id ).value;
// if 'next' get current month select + 1
// if 'prev' get current month select - 1
if( obj.id == this.caletop.next_month_id )
curmonthselect.value = curmonth + 1;
else
curmonthselect.value = curmonth - 1;
var getnowmonth = curmonthselect.value - 1;
if( getnowmonth == -1 && curmonth == 1) getnowmonth = 0;
if( getnowmonth == -1 && curmonth == 12 ) getnowmonth = 11;
this._bindalldata( curyear, getnowmonth );
};
/* if 'select:year' and 'select:month' change value update data */
calendar.prototype.updateselect = function(){
var yearselectvalue = this.find( this.caletop.sq_year_id ).value;
var monthselectvalue = this.find( this.caletop.sq_month_id ).value;
// re-bind panel data
this._bindalldata( yearselectvalue, monthselectvalue - 1 );
};
/* back to taday: re-load '_bindalldata()' */
calendar.prototype.backtoday = function(){
this._bindalldata( this.year, this.month );
};
/* find the instance object or children of instance object by id */
calendar.prototype.find = function( elemid, childtag ){
if( !childtag )
// return: object
return document.getelementbyid( elemid );
else
// return: object array
return this.find( elemid ).getelementsbytagname( childtag );
};
/* set element css */
calendar.prototype.css = function( oid, selector ){
var o = this.find( oid );
selector['left']?o.style.left = selector['left']:;
selector['top']?o.style.top = selector['top']:;
selector['position']? o.style.position = selector['position']:;
}
/* check calendar show or hidden */
calendar.prototype.showhide = function( objectid, dis ){
return this.find( objectid ).style.display = dis;
};
/* init the top quick menu link and select */
calendar.prototype.resetlinkselect = function(){
this.showhide( this.caletop.sq_year_id, none );
this.showhide( this.caletop.sq_month_id, none );
this.showhide( this.caletop.lq_year_id, block );
this.showhide( this.caletop.lq_month_id, block );
};
/* put this calendar into the html of instance */
calendar.prototype.show = function( msgdata ){
var obj = this.find( this.instanceid );
if( obj ){
obj.innerhtml = this._getviewelement();
// init calendar event and data
this._initcalendar();
// this function don't have 'close'
this.showhide( this.caletop.close_id, none );
if( typeof msgdata == 'object'){
this.msgstore = msgdata;
this._initpopmsg( this.msgstore );
}
}
};
/* init pop message */
calendar.prototype._initpopmsg = function(){
var cr = this;
var selectyear = this.find( this.caletop.sq_year_id ).value;
var selectmonth = this.find( this.caletop.sq_month_id ).value;
var daysofmontharray = this._getmonthviewarray( selectyear, selectmonth );
var spans = this.find( this.dayscontainer_id, span );
for( var key in this.msgstore ){
var keymd = key.substring( 4 );
var keyy = key.substring( 0, 4 );
for( var i = 0; i var getmd = selectmonth + + spans[i].innerhtml;
if( getmd == keymd ){
if( selectyear == keyy )
spans[i].classname = this.tipdayclass + + keyy;
else
spans[i].classname = this.oldtipdayclass + + keyy;
spans[i].onmouseover = function(){
var hoverdate = this.classname.split( )[1] + + selectmonth + + this.innerhtml;
var y = this.classname.split( )[1],
m = selectmonth,
d = this.innerhtml;
cr.find( cr.msgcontainer_id ).innerhtml = cr._getmsghtml( y, m, d );
cr.showhide( cr.msgcontainer_id, block );
}
}
}
}
cr.find( cr.calecontainer_id ).onmouseout = function(){
cr.showhide( cr.msgcontainer_id, none );
}
};
/* get message */
calendar.prototype._getmsghtml =function( y, m, d ){
var date = y + m + d;
var showdate = y + - + m + - + d;
var msghtml = ''+showdate+':
'+ this.msgstore[date] +'
';
return msghtml;
}
/* pop-up the calendar */
calendar.prototype.pop = function(){
var cr = this;
var obj = this.find( this.instanceid );
if( obj ){
// instance object click then pop-up the calendar
obj.onclick = function( e ){
var e = window.event || e;
var x = e.x || e.pagex,
y = e.y || e.pagey;
if( !cr.find( cr.popcontainer_id ) ){
// create the pop-up div
var odiv = document.createelement(div);
odiv.id = cr.popcontainer_id;
document.body.appendchild( odiv );
}else{
cr.showhide( cr.popcontainer_id, block );
}
cr.find( cr.popcontainer_id ).innerhtml = cr._getviewelement();
// init calendar event and data
cr._initcalendar();
// set days click event
cr.popdaysclickevent( obj );
// set position
cr.css( cr.popcontainer_id, {position: absolute, left: x + px, top: y + px});
// close panel event
cr.find( cr.caletop.close_id ).onclick = function(){ cr.showhide( cr.popcontainer_id, none ); };
};
}
};
/* click the pop calendar days event [for input] */
calendar.prototype.popdaysclickevent = function( obj ){
var cr = this;
var spans = cr.find( cr.dayscontainer_id, span );
for( var i = 0; i spans[i].onclick = function(){
if( this.innerhtml != ){
var getyear = cr.find( cr.caletop.sq_year_id ).value;
var getmonth = cr.find( cr.caletop.sq_month_id ).value;
obj.value = getyear +-+ getmonth +- + this.innerhtml;
cr.showhide( cr.popcontainer_id, none );
}
}
};