/*
* カレンダー
* 言語 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+= '';
caleElem+= '';
caleElem+= '';
caleElem+= '';
caleElem+= '';
caleElem+= '';
caleElem+= '';
caleElem+= ' | ';
caleElem+= '. | ';
caleElem+= '';
caleElem+= '';
caleElem+= '';
caleElem+= ' | ';
caleElem+= ' ';
caleElem+= ' ';
caleElem+= ' | ';
// Quick control
caleElem+= '';
caleElem+= ''; caleElem+= ' x'; caleElem+= '
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" );
}
}
};
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
