One simple calendar Control for JS Learning

The calendar control is similar to the calendar used by the garden, for example:

This calendar control is not difficult to implement. The following is a brief analysis of my ideas:

First, the configuration items of the control are as follows:
Copy codeThe Code is as follows:
...
Settings:
{
FirstDayOfWeek: 1,
BaseClass: "calendar ",
CurDayClass: "curDay ",
PrevMonthCellClass: "prevMonth ",
NextMonthCellClass: "nextMonth ",
CurMonthNormalCellClass :"",
PrevNextMonthDaysVisible: true
},
...
WeekDayNames: [],
...

Half of them are used to control the cell style (not to describe too much), and the others (firstDayOfWeek, prevNextMonthDaysVisible, weekDayNames) have the following meanings:
FirstDayOfWeek: the day of the week as the first day of the calendar.
PrevNextMonthDaysVisible: whether to display dates other than this month
WeekDayNames: name of the Week (an array with an index starting from 1, the value at 1 will be used as the display name for Monday, and so on)

Next, go to the html code generation stage:
1. Generate the calendar header:
Copy codeThe Code is as follows:
_ RenderTitle: function (month, year ){
Var ht = [];
// Date
Ht. push ("<tr> ");
Ht. push ("<th colspan = '7' style = 'width: 100%; '> <div style = 'float: left; width: 10%; text-align: center; 'id = '", this. containerId, "_ prevMonth 'title = 'last February 11'> </div> <div style = 'float: left; text-align: center; width: 80% '> ", year, "year", month, "month </div> <div style = 'float: right; width: 10%; text-align: center; 'id = '", this. containerId, "_ nextMonth 'title = 'Next month' >></div> </th> ");
Ht. push ("</tr> ");
// Week
Ht. push ("<tr> ");
For (var I = 0; I <7; I ++ ){
Var day = (I + this. settings. firstDayOfWeek) = 7? 7: (I + this. settings. firstDayOfWeek) % 7;
Ht. push ("<th>", this. weekDayNames [day], "</th> ")
}
Ht. push ("</tr> ");
Return ht. join ("");
},

The date part is the id of the Operation 'button '. Use the id of the calendar control container as the prefix to ensure that the id is unique.
Week obtains weekDayName Based on firstDayOfWeek settings. The key here is to determine the day of the week for each cell. The idea is simple:
Var day = (I + this. settings. firstDayOfWeek) = 7? 7: (I + this. settings. firstDayOfWeek) % 7;
In this way, the week represented by the current cell can be obtained.

2. Generate the main part of the calendar:
Copy codeThe Code is as follows:
_ RenderBody: function (month, year ){
Var date = new Date (year, month-1, 1 );
Var day = date. getDay ();
Var dayOfMonth = 1;
Var daysOfPrevMonth = (7-this. settings. firstDayOfWeek + day) % 7;
Var totalDays = this. _ GetTotalDays (month, year );
Var totalDaysOfPrevMonth = this. _ GetToalDaysOfPrevMonth (month, year );
Var ht = [];
Var curDate;
For (var I = 0; I ++ ){
CurDate = null;
If (I % 7 = 0) {// new row
Ht. push ("<tr> ");
}
Ht. push ("<td ");
If (I> = daysOfPrevMonth & dayOfMonth <= totalDays) {// this month
CurDate = new Date (year, month-1, dayOfMonth );
If (Date. parse (new Date (). toDateString ()-curDate = 0 ){
Ht. push ("class = '", this. settings. curDayClass ,"'");
}
Else {
Ht. push ("class = '", this. settings. curMonthNormalCellClass ,"'");
}
DayOfMonth ++;
}
Else if (I <daysOfPrevMonth) {// last month
If (this. settings. prevNextMonthDaysVisible ){
Var prevMonth = month;
Var prevYear = year;
If (month = 1 ){
PrevMonth = 12;
PrevYear = prevYear-1;
}
Else {
PrevMonth = prevMonth-1;
}
CurDate = new Date (prevYear, prevMonth-1, totalDaysOfPrevMonth-(daysOfPrevMonth-I-1 ));
Ht. push ("class = '", this. settings. prevMonthCellClass ,"'");
}
}
Else {// next month
If (this. settings. prevNextMonthDaysVisible ){
Var nextMonth = month;
Var nextYear = year;
If (month = 12 ){
NextMonth = 1;
NextYear = prevYear + 1;
}
Else {
NextMonth = nextMonth + 1;
}
CurDate = new Date (nextYear, nextMonth-1, I-dayOfMonth-daysOfPrevMonth + 2 );
Ht. push ("class = '", this. settings. nextMonthCellClass ,"'");
}
}
Ht. push ("> ");
Ht. push (this. _ BuildCell (curDate ));
Ht. push ("</td> ");
If (I % 7 = 6) {// end a row
Ht. push ("</tr> ");
}
If (I % 7 = 6 & dayOfMonth-1> = totalDays ){
Break;
}
}
Return ht. join ("");
},

(1). Obtain the day of the week on the first day of the month. In this way, you can determine which cell should be placed on the first day, that is, from which cell of the month (the month is reduced by 1 When the creation Date is created, because of the characteristics of the js Date object ).
(2). defines an identity variable dayOfMonth to control the display area of the current month date.
(3 ). calculate the number of days of the previous month to be displayed and the total number of days of the previous month (you do not need to calculate the number of days and total number of days to be displayed next month, because the number of days to be displayed next month starts from 1 and cannot exceed 6 ).
(4). display the date of this month:
Condition I> = daysOfPrevMonth & dayOfMonth <= totalDays determines the display area of the current month date.
(5). display the date of the previous month:
When I <daysOfPrevMonth, It is the display area of the last month's date.
(6). (4) and (5) are of course the display area of the next month's date.
(7). When to end:
From the code, we can see that there is no termination condition for the for loop. Therefore, you must decide when to exit the loop:
Copy codeThe Code is as follows:
If (I % 7 = 6 & dayOfMonth-1> = totalDays ){
Break;
}

I % 7 = 6 indicates that a row ends, and dayOfMonth-1> = totalDays indicates that the current month date has been displayed.
(8). Construct curDate:
CurDate indicates the date corresponding to each cell.
When the current month Date is displayed, curDate = new Date (year, month-1, dayOfMonth );
When the last month Date is displayed, curDate = new Date (prevYear, prevMonth-1, totalDaysOfPrevMonth-(daysOfPrevMonth-I-1 ));
When the next month's Date is displayed, curDate = new Date (nextYear, nextMonth-1, I-dayOfMonth-daysOfPrevMonth + 2), plus 2 is because I is from 0, and itself is 1 less, dayOfMonth is added when you exit and display the date of this month.
Finally, let's take a look at what _ BuildCell has done:
Copy codeThe Code is as follows:
_ BuildCell: function (curDate ){
Var ht = [];
If (curDate ){
For (var j = 0; j <this. dateLinkMappings. length; j ++ ){
If (Date. parse (this. dateLinkMappings [j]. Date)-curDate = 0 ){
Ht. push ("<a href = '", this. dateLinkMappings [j]. Link, "'>", curDate. getDate (), "</a> ");
Break;
}
}
If (j = this. dateLinkMappings. length ){
Ht. push (curDate. getDate ());
}
}
Else {
Ht. push ("");
}
Return ht. join ("");
},

In fact, the intent of this calendar control is that you can input a ing array of the link between the date and the date at initialization, that is, this. dateLinkMappings, if the build date is included in this. in dateLinkMappings, the current cell is constructed into the <a> format. Otherwise, the cell is in the normal text format.

OK. The implementation logic is roughly the same. At the end of this article, let's take a look at the demo:
The front-end call code is as follows:
Copy codeThe Code is as follows:
Var date = new Date ();
Var mapping = [];
Mapping. push (new DateLinkMapping ("3-22-2010", "javascript: alert (1 )"));
Mapping. push (new DateLinkMapping ("4-1-2010", "javascript: alert (1 )"))
Calendar. Init (null, mapping );
Calendar. RenderCalendar ("myCalendar", date. getMonth () + 1, date. getFullYear ());

Package