javascript 日历提醒系统( 兼容所有浏览器 )
程序员文章站
2022-06-29 09:18:21
功能介绍: 1.正常的日历功能。 2.等等等 3.接收 数组 例如:复制代码 代码如下:new calendar("id").show( { "20091120": "今天...
功能介绍:
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();
其他的就不多说了。觉得好的话,就支持下。呵呵。
有什么问题或好的想法,请告诉我。谢谢
详细的用法和例子在压缩包里有。
演示地址
打包下载地址
/*
* 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+= '<div id='+this.calecontainer_id+'>';
// <top>
caleelem+= '<div id="calendartopcontainer"><table cellpadding="0" cellspacing="0"><tr>';
// top day view
caleelem+= '<td id='+this.caletop.today_view_id+'></td>';
// link or select control
caleelem+= '<td>';
caleelem+= '<div id='+this.caletop.week_view_id+'></div>';
caleelem+= '<table id="calendaryearmonthcontainer" cellpadding="0" cellspacing="0">';
caleelem+= '<tr>';
caleelem+= '<td>';
caleelem+= '<a id='+this.caletop.lq_year_id+' href="javascript:void(0);"></a>';
caleelem+= '<select id='+this.caletop.sq_year_id+'></select>';
caleelem+= '</td>';
caleelem+= '<td>.</td>';
caleelem+= '<td>';
caleelem+= '<a id='+this.caletop.lq_month_id+' href="javascript:void(0);"></a>';
caleelem+= '<select id='+this.caletop.sq_month_id+'></select>';
caleelem+= '</td>';
caleelem+= '</tr>';
caleelem+= '</table>';
caleelem+= '</td>';
// quick control
caleelem+= '<td>';
caleelem+= '<div id="calendarclosecontainer">';
caleelem+= '<a id='+this.caletop.close_id+' href="javascript:void(0);">x</a>';
caleelem+= '</div>';
caleelem+= '<div id="calendarquickcontainer">';
caleelem+= '<a id='+this.caletop.prev_month_id+' href="javascript:void(0);">«</a>';
caleelem+= '<a id='+this.caletop.back_today_id+' href="javascript:void(0);"> </a>';
caleelem+= '<a id='+this.caletop.next_month_id+' href="javascript:void(0);">»</a>';
caleelem+= '</div>';
caleelem+= '</td>';
caleelem+= '</tr></table cellpadding="0" cellspacing="0"></div>';
// </top>
// <calendar view>
caleelem+= '<div id="calendarmaincontainer">';
// week menu
caleelem+= '<div id="calendarweekscontainer">';
for(var i = 0; i < 7; i ++){
caleelem+= '<span>'+calendar.lang["weeksmenu"][this.language][i]+'</span>';
}
caleelem+= '</div>';
// days view
caleelem+= '<table id='+this.dayscontainer_id+' cellpadding="0" cellspacing="0">';
for(var tr = 0; tr < 6; tr ++){
caleelem+= '<tr>';
for(var td = 0; td < 7; td ++){
caleelem+= '<td><span></span></td>';
}
caleelem+= '</tr>';
}
caleelem+= '</table>';
caleelem+= '</div>';
// </calendar view>
caleelem+= '</div>';
// <calendar msg>
caleelem+= '<div id='+this.msgcontainer_id+'></div>';
// </calendar 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 < 42; i ++ )
montharray[i] = " ";
for( var j = 0; j < daysofmonth; 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 < selectobject.options.length; 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 <= this.endyear; i ++, oyearlen ++ )
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 < 12; i ++, omonthlen ++ )
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.length; 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.length; 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 < selectarray.length; 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 < spans.length; 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 = '<div>'+showdate+':</div><div>'+ this.msgstore[date] +'</div>';
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.length; 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" );
}
}
};
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();
其他的就不多说了。觉得好的话,就支持下。呵呵。
有什么问题或好的想法,请告诉我。谢谢
详细的用法和例子在压缩包里有。
演示地址
打包下载地址
复制代码 代码如下:
/*
* 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+= '<div id='+this.calecontainer_id+'>';
// <top>
caleelem+= '<div id="calendartopcontainer"><table cellpadding="0" cellspacing="0"><tr>';
// top day view
caleelem+= '<td id='+this.caletop.today_view_id+'></td>';
// link or select control
caleelem+= '<td>';
caleelem+= '<div id='+this.caletop.week_view_id+'></div>';
caleelem+= '<table id="calendaryearmonthcontainer" cellpadding="0" cellspacing="0">';
caleelem+= '<tr>';
caleelem+= '<td>';
caleelem+= '<a id='+this.caletop.lq_year_id+' href="javascript:void(0);"></a>';
caleelem+= '<select id='+this.caletop.sq_year_id+'></select>';
caleelem+= '</td>';
caleelem+= '<td>.</td>';
caleelem+= '<td>';
caleelem+= '<a id='+this.caletop.lq_month_id+' href="javascript:void(0);"></a>';
caleelem+= '<select id='+this.caletop.sq_month_id+'></select>';
caleelem+= '</td>';
caleelem+= '</tr>';
caleelem+= '</table>';
caleelem+= '</td>';
// quick control
caleelem+= '<td>';
caleelem+= '<div id="calendarclosecontainer">';
caleelem+= '<a id='+this.caletop.close_id+' href="javascript:void(0);">x</a>';
caleelem+= '</div>';
caleelem+= '<div id="calendarquickcontainer">';
caleelem+= '<a id='+this.caletop.prev_month_id+' href="javascript:void(0);">«</a>';
caleelem+= '<a id='+this.caletop.back_today_id+' href="javascript:void(0);"> </a>';
caleelem+= '<a id='+this.caletop.next_month_id+' href="javascript:void(0);">»</a>';
caleelem+= '</div>';
caleelem+= '</td>';
caleelem+= '</tr></table cellpadding="0" cellspacing="0"></div>';
// </top>
// <calendar view>
caleelem+= '<div id="calendarmaincontainer">';
// week menu
caleelem+= '<div id="calendarweekscontainer">';
for(var i = 0; i < 7; i ++){
caleelem+= '<span>'+calendar.lang["weeksmenu"][this.language][i]+'</span>';
}
caleelem+= '</div>';
// days view
caleelem+= '<table id='+this.dayscontainer_id+' cellpadding="0" cellspacing="0">';
for(var tr = 0; tr < 6; tr ++){
caleelem+= '<tr>';
for(var td = 0; td < 7; td ++){
caleelem+= '<td><span></span></td>';
}
caleelem+= '</tr>';
}
caleelem+= '</table>';
caleelem+= '</div>';
// </calendar view>
caleelem+= '</div>';
// <calendar msg>
caleelem+= '<div id='+this.msgcontainer_id+'></div>';
// </calendar 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 < 42; i ++ )
montharray[i] = " ";
for( var j = 0; j < daysofmonth; 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 < selectobject.options.length; 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 <= this.endyear; i ++, oyearlen ++ )
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 < 12; i ++, omonthlen ++ )
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.length; 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.length; 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 < selectarray.length; 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 < spans.length; 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 = '<div>'+showdate+':</div><div>'+ this.msgstore[date] +'</div>';
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.length; 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" );
}
}
};
下一篇: 吃茶树菇的好处有哪些
推荐阅读
-
JavaScript自定义DateDiff函数(兼容所有浏览器)
-
javascript 日历提醒系统( 兼容所有浏览器 )
-
javascript 日历提醒系统( 兼容所有浏览器 )
-
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器_javascript技巧
-
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器_javascript技巧
-
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)_javascript技巧
-
onkeypress字符按键兼容所有浏览器使用介绍_javascript技巧
-
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)_javascript技巧
-
js实现点击复制当前文本到剪贴板功能(兼容所有浏览器)_javascript技巧
-
onkeypress字符按键兼容所有浏览器使用介绍_javascript技巧