javascript calendar reminder system (compatible with all browsers)_time and date

Function introduction:
1. Normal calendar function.
2. Wait etc
3. Receive array
For example:

Copy code The code is as follows:

new Calendar("id").show(
{
"20091120": "What did you do today...",
"2009320": "What did you do today? . . "
}
);

Calendar reminder styles are divided into 3 categories.
a. Today
b. Prompt style for the current month of the year
c. Prompt style for the current month
The prompt content will automatically appear when the mouse is over the date with the prompt
4. . . . .
Mainly divided into 2 uses.
1. Provide a div or other element and pass the container's id to Calendar. The method name is: show()
Example: var cr = Calendar("div1");
cr.show( /*data - This array is optional, if passed there will be a prompt Function */ );
2. Provide an input[type='text'] element and pass the element's id to Calendar. The method name is: pop()
Example: var cr = Calendar("input2");
cr.pop();
Not much else to say. If you think it's good, support it. hehe.
If you have any questions or good ideas, please let me know. Thank you
Detailed usage and examples are in the compressed package.
Demo address
http://img.jb51.net/online/calendar/demo-1.html
http://img.jb51.net/online /calendar/demo-2.html
Package download addresshttp://www.jb51.net/codes/12595.html

Copy code The code is as follows:

/*
* 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+= '';

        // Quick control
        caleElem+= '';

        caleElem+= '

';
        caleElem+= '

';
        caleElem+= '';
        caleElem+= '';
        caleElem+= '';
        caleElem+= '';
        caleElem+= '';
        caleElem+= '';
        caleElem+= '

';         caleElem+= '';         caleElem+= '';         caleElem+= '

.

';         caleElem+= '';         caleElem+= '';         caleElem+= '

';
        caleElem+= '

';
        caleElem+= '

';
        caleElem+= 'x';
        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] +'

';
    msgHtml을 반환합니다.
}
/* 캘린더 팝업 */
Calendar.prototype.pop = function(){
    var cr = this;
    var obj    = this.find( this.InstanceId );
    if( obj ){
        // 인스턴스 객체 클릭 후 캘린더 팝업
        obj.onclick = function( e ){
            var e = window.event || 이자형;
            var x = e.x || e.pageX,
                y = e.y || e.pageY;
            if( !cr.find( cr.popContainer_id ) ){
               // 팝업 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();

            // 캘린더 이벤트 및 데이터 초기화
            cr._initCalendar();

            // 요일 클릭 이벤트 설정
            cr.popDaysClickEvent( obj );

            // 위치 설정
            cr.css( cr.popContainer_id, {위치: "절대", 왼쪽: x "px", 위쪽: y "px"});

            // 패널 이벤트 닫기
            cr.find( cr.caleTop.close_id ).onclick = function(){ cr.showHide( cr.popContainer_id, "none" ); };
        };
    }
};
/* 팝 캘린더 일 이벤트 클릭 [입력용] */
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" );
            }
        }
};