자바스크립트 달력 알림 시스템(모든 브라우저와 호환 가능)

기능 소개:
1. 일반 달력 기능.
2. 대기 등
3. 배열 수신
예:

new Calendar("id").show( 
{ 
"20091120": "오늘 뭐 했어요...", 
"2009320": "오늘 뭐했어? . . " 
} 
) 

캘린더 알림 스타일은 3가지 카테고리로 나뉩니다.
a.오늘
b. 이번 달의 프롬프트 스타일
c. 이번 달의 프롬프트 스타일
프롬프트가 있는 날짜 위에 마우스를 올리면 프롬프트 내용이 자동으로 나타납니다.
4. . . . .
크게 2가지 용도로 나누어집니다.
1. div 또는 기타 요소를 제공하고 컨테이너의 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

코드 복사 코드는 다음과 같습니다.

/*
* 달력
* 언어 0: 중국어, 1: 영어
* 1. 달력을 html 요소에 넣고 'show()' 사용
* 2.Pop -up 캘린더 사용 'pop()'
*/

var Calendar = function( 인스턴스Id, 언어, startYear, endYear ){
    if( typeof 인스턴스Id == "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 = 인스턴스 ID;
        this.Language    = 언어     || 1;
        this.StartYear    = startYear || 이.연도 - 5;
        this.EndYear    = endYear     || 이.1학년;

        // 인스턴스가 input[type='text'] 객체인 경우
        this.popContainer_id = 'popCalendarContainer';

        // 메시지 저장소
        this.msgStore = [];

        this.caleContainer_id = 'calendarContainer';
        this.caleTop = {
            today_view_id:        'calendarTodayView',
          week_view_id:        'calendarWeekView'
            l q_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+= 'x';
caleElem+= '

';

caleElem+= '

';
        caleElem+= '«';
        caleElem+= ' ';
        caleElem+= '»';
        caleElem+= '

';
caleElem+= '

';
        //

        //
        caleElem+= '

';
// Week menu
caleElem+= '

';
        for(var i = 0; i < 7; i ++){
caleElem+= ''+Calendar.lang["weeksMenu"][this.Language][i]+'';
        }
        caleElem+= '

';

        // Days view
        caleElem+= '';
        for(var tr = 0; tr < 6; tr ++){
        caleElem+= '';
        for(var td = 0; td < 7; td ++){
        caleElem+= '';
        }
        caleElem+= '';
        }
        caleElem+= '

';

caleElem+= '

';
//

caleElem+= '

';

//
caleElem+= '

';
        //

        // 생성 종료
    return caleElem;
};
/* 월 데이터 가져오기 */
Calendar.prototype._getMonthViewArray = function( 년, 월 ){
    var MonthArray = [];
    // 한 주의 시작일부터
    var startDayOfWeek = new Date( 년, 월, 1).getDay();

    // 이번 달 총 일수
    var daysOfMonth = new Date( 년, 월 1, 0).getDate();

    // 42: 7*6 행렬
    for( var i = 0; i < 42; i )
     MonthArray[i] = " ";

    for( var j = 0; j < daysOfMonth; j )
        monthArray[j startDayOfWeek] = j 1 ;

    monthArray를 반환합니다.
};
/* 선택에서 옵션 인덱스 검색 */
Calendar.prototype._getOptionIndex = function( selectObject, value ){
    for( var j = 0; j < selectObject.options.length; j ){
        if( value == selectObject.options[j].value )
            return j;
    }
};
/* 연도 데이터를 '연도 선택'에 바인딩 */
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 );
};
/* 월 데이터를 '월 선택'에 바인딩 */
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 );
};
/* 데이터 바인딩 */
Calendar.prototype._bindAllData = function( curYear, curMonth ){
    var cr = this;
    // 'select:Year'에 기본 데이터 바인딩
    this._bindYearIntoSelect();

    // 기본 데이터를 'select:Month'에 바인딩
    this._bindMonthIntoSelect();

    // 'select:Year' 및 'select:Month' 값 변경
    this.changeSelectValue( curYear, curMonth );

    // '현재 일별 보기 및 이번 주별 보기'에 기본 데이터 바인딩
    this.find( this.caleTop.week_view_id ).innerHTML = Calendar.lang['weeks'][this.Language] [이번.주];
    this.find( this.caleTop.today_view_id ).innerHTML = this.Today;

    // 날짜를 가져와 'CalendarMain'에 바인딩
    // 현재 날짜 클래스 및 마우스 이벤트 추가
    var daysOfMonthArray = this._getMonthViewArray( curYear, curMonth );
    var spas = 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 "" 범위[i].innerHTML;
        if( curYMD == selectYMD )
            spans[i].className = this.curDayClass;
        else
            spans[i].className = "";
    }
    // 며칠간 팝업 메시지가 오지 않는다면
    if( this.msgStore != "" )
        this._initPopMsg( this.msgStore );
}
/* 이벤트 바인딩 */
Calendar.prototype._bindAllEvent = function(){
    var cr = this;
    // 'toPrevMonth, toNextMonth, backToday, 오늘 보기' 이벤트
    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(); };

    // '연도 및 월 선택' onchange 이벤트
    this.find( this.caleTop.sq_year_id ).onchange = function(){ cr.updateSelect(); };
    this.find( this.caleTop.sq_month_id ).onchange    = function(){ cr.updateSelect(); };

    // 퀵링크 이벤트
    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" );
    };

    // 점선 링크 제거
    var oLink = this.find( this.caleContainer_id, "a" )
    for( var i = 0; i < oLink.length; i ) {
        oLink[i].onfocus = function(){ this.blur(); }
    }
}
/* 캘린더 보기에 캘린더 바인딩 */
Calendar.prototype._initCalendar = function(){
    this._bindAllEvent();
    this._bindAllData( this.Year, this.Month );
};
/* 빠른 선택 값 변경 */
Calendar.prototype.changeSelectValue = function( 년, 월 ){
    var ymArray = [], selectArray = [], linkArray = [];
    // '연도'와 '월'을 배열에 저장합니다.
    ymArray[0] = 연도; ymArray[1] = 1개월;

    // 'selectYear_id' 및 'selectMonth_id'를 배열에 저장합니다.
    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] );
        // 반환 인덱스 가져오기
        var index = this._getOptionIndex( selectObject, ymArray[i] );
        // '연도', '월' 선택 및 값 연결 재설정
        selectObject.options[index].selected = "selected";

        this.find( linkArray[i] ).innerHTML = selectObject.value;
    }

    this.resetLinkSelect();
};
/* 다음 또는 이전 달 검색 */
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;
    // '다음'이 이번 달을 가져오는 경우 1을 선택합니다.
    // '이전'이 이번 달을 가져오는 경우 - 1을 선택합니다.
    if( obj.id == this.caleTop.next_month_id )
        curMonthSelect. 값 = 현재월 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 );
};
/* 'select:Year' 및 'select:Month' 변경 값 업데이트 데이터인 경우 */
Calendar.prototype.updateSelect = function(){
    var yearSelectValue     = this.find( this.caleTop. sq_year_id ).값;
    var MonthSelectValue = this.find( this.caleTop.sq_month_id ).value;
    // 패널 데이터 다시 바인딩
    this._bindAllData( yearSelectValue, MonthSelectValue - 1 );

};
/* 오늘로 돌아가기: '_bindAllData()' 다시 로드 */
Calendar.prototype.backToday = function(){
    this._bindAllData( this.Year, this.Month );
};
/* ID로 인스턴스 객체 또는 인스턴스 객체의 하위 항목 찾기 */
Calendar.prototype.find = function( elemId, childTag ){
    if( !childTag )
        // 반환: 객체
        return document.getElementById( elemId );
    else
        // 반환: 객체 배열
        return this.find( elemId ).getElementsByTagName( childTag );
};
/* 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']:"";
    선택기['위치']? o.style.position = 선택기['position']:"";
}
/* 캘린더 표시 여부 확인 */
Calendar.prototype.showHide = function( objectId, dis ){
    return this.find( objectId ).style.display = dis;
};
/* 상단 빠른 메뉴 링크를 초기화하고 */
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" );
};
/* 이 달력을 인스턴스의 HTML에 넣습니다 */
Calendar.prototype.show = function( msgData ){
    var obj = this.find( this.InstanceId );
    if( obj ){
        obj.innerHTML = this._getViewElement();
        // 캘린더 이벤트 및 데이터 초기화
        this._initCalendar();

        // 이 함수에는 'close'가 없습니다.
        this.showHide( this.caleTop.close_id, "none" );
        if( msgData 유형 == '객체'){
            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 = '

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

자바스크립트 달력 알림 시스템(모든 브라우저와 호환 가능)_시간 및 날짜