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
'; 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; }; /* 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] = " ";
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(); };
// 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;
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._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 = '
'+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" ); } } };
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn