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";
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
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
