JavaScript カレンダー リマインダー システム (すべてのブラウザと互換性あり)_時刻と日付

機能紹介:
1. 通常のカレンダー機能。
2. 待機など
3. 配列を受信します
例:

コードをコピーします コードは次のとおりです以下:

new Calendar("id").show(
{
"20091120": "今日は何をしましたか...",
"2009320": 「今日は何をしましたか? . . "
}
);

カレンダーのリマインダーのスタイルは 3 つのカテゴリに分類されます。
a. 今日
b. 今年の現在の月のプロンプト スタイル
プロンプトのある日付の上にマウスを置くと、プロンプトの内容が自動的に表示されます。
4. 。 。 。 。
用途は主に2つに分かれます。
1.
div または他の 要素 を指定し、コンテナーの ID を Calendar に渡します。メソッド名は次のとおりです: show() 例: var cr = Calendar("div1");
cr.show( /*data - この配列はオプションです。渡されると、プロンプト Function */ );
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.「show()」を使用して HTML 要素にカレンダーを挿入します
* 2.Pop -up カレンダーは 'pop()' を使用します
*/

var Calendar = function(instanceId, language, start Year, end Year ){
if( typeofinstanceId == "string" ){
this.Date = new Date();
this. Year = this.Date.getFull Year();
this.Month = this.Date.getMonth();
this.Week = this.Date.getDay();
this.Today = this.Date.getDate();

this.InstanceId = インスタンス ID;
this.Language = 言語 || 1;
this.Start Year = start Year ||この.年 - 5;
this.End Year = end Year ||これ。1年目。

// インスタンスが input[type='text'] オブジェクトの場合
this.popContainer_id = 'popCalendarContainer';

// メッセージストア
this.msgStore = [];

this.caleContainer_id = 'calendarContainer';
this.caleTop = {
today_view_id: 'calendarTodayView',
week_view_id:
lq _year_id: 'linkQuick Year',
lq_month_id: 'linkQuickMonth',
sq_year_id: ' selectQuick Year',
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+= '

';
        //

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

';
//

// Create End
return caleElem;
};
/* 月のデータを取得 */
Calendar.prototype._getMonthViewArray = function( year, month ){
var monthArray = [];
// 週の始まりの日から
var beginDayOfWeek = new Date( year, month, 1).getDay();

// 今月の合計日数
var daysOfMonth = new Date( year, month 1, 0).getDate();

// 42: 7*6 行列
for( var i = 0; i monthArray[i] = " ";

for( var j = 0; j monthArray[j beginDayOfWeek] = j 1 ;

月配列を返します。
};
/* select のオプションのインデックスを検索します */
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._bind YearIntoSelect = function(){
var oyear = this.find( this.caleTop.sq_year_id );
var oyearLen = 0;
for( var i = this.Start Year; i <= this.End Year; i , o YearLen )
o Year.options[o YearLen] = new Option( i , i );
};
/* 月のデータを '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 );
};
/* データのバインド */
Calendar.prototype._bindAllData = function( cur Year, curMonth ){
var cr = this;
// デフォルトのデータを「select: Year」にバインドします
this._bindyearIntoSelect();

// デフォルトのデータを「select:Month」にバインドします
this._bindMonthIntoSelect();

// 「select: Year」と「select:Month」の値を変更します
this.changeSelectValue( cur Year, 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( cur Year, 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( this.msgStore != "" )
this._initPopMsg( this.msgStore );
}
/* イベントをバインド */
Calendar.prototype._bindAllEvent = function(){
var cr = this;
// 'toPrevMonth, toNextMonth, backToday, today view' イベント
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( year, month ){
var ymArray = [], selectArray = [], linkArray = [];
// 「年」と「月」を配列に保存します
ymArray[0] = year; 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] );
// 戻りインデックスを取得します
varindex = 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 cur Year = 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( cur Year, getNowMonth );
};
/* 'select: Year' と 'select:Month' の値が変更された場合、データを更新します */
Calendar.prototype.updateSelect = function(){
var yearSelectValue = this.find( this.caleTop. sq_year_id ).value;
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: object
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 = selector['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( 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 = '

'+showDate+':

'+ this.msgStore[date] +'

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