javascript 日历提醒系统( 兼容所有浏览器 )

功能介绍：
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" );
            }
        }
};