欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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" );
            }
        }
};