This calendar control is similar to a garden calendar, as shown in the following illustration:
This calendar control is not difficult to implement, the following simple analysis of my ideas:
First, it is a configurable item for the control:
Copy Code code as follows:
...
Settings
{
Firstdayofweek:1,
BaseClass: "Calendar",
Curdayclass: "Curday",
Prevmonthcellclass: "Prevmonth",
Nextmonthcellclass: "Nextmonth",
Curmonthnormalcellclass: "",
Prevnextmonthdaysvisible:true
},
...
Weekdaynames: [],
...
Half of these are used to control the cell style (not too much description), the other several (firstdayofweek,prevnextmonthdaysvisible,weekdaynames), the meaning is as follows:
FirstDayOfWeek: Calendar for the first day of the week
Prevnextmonthdaysvisible: Do you want to show dates outside this month
Weekdaynames: The name of the week (an array with an index starting at 1, the value at 1 will be the display name for Monday, and so on)
Next, go to the build HTML code phase:
1. Generate Calendar headers:
Copy Code code 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 month ' > <</div><div style= ' float:left;text-align:center;width:80% ' > ', Year, "Years", 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 action ' button ' using the ID of the Calendar control container as the prefix to ensure that the ID is unique.
The week section gets the WeekdayName according to the FirstDayOfWeek settings. The key here is to judge how many weeks each cell represents, and the idea is simple:
var day = (i + this.settings.firstDayOfWeek) = = 7? 7: (i + this.settings.firstDayOfWeek)% 7;
This will allow you to get the week that the current cell represents.
2. Generate the main part of the calendar:
Copy Code code 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 line
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 line
Ht.push ("</tr>");
}
if (i% 7 = 6 && dayOfMonth-1 >= totaldays) {
Break
}
}
Return Ht.join ("");
},
(1). Obtain the number of days of the month. This will determine which cell the number 1th should be placed in, that is, the cell from which the month started (when the creation date month minus 1, due to the characteristics of the JS Date object itself).
(2). Defines an identity variable DayOfMonth that controls the display area for this month's date.
(3). Calculates the number of days to display for the month and the total number of days of the month (regardless of the number of days and total days to be displayed next month, because the date to be displayed next month is starting from 1, up to no more than 6).
(4). Show this month's date:
Conditions I >= daysofprevmonth && dayofmonth <= totaldays determine the display area for this month's date.
(5). Show last month's date:
When I < Daysofprevmonth is the display area for the last month's date.
(6). (4), (5) is of course the display area of the next month's date.
(7). When to end:
There is no termination condition for the for loop from the code, so you must decide when to exit the loop yourself:
Copy Code code as follows:
if (i% 7 = 6 && dayOfMonth-1 >= totaldays) {
Break
}
I% 7 = 6 means the end of the line, DayOfMonth-1 >= Totaldays said this month's date has been shown.
(8). Structural curdate:
Curdate represents the corresponding date for each cell.
When displaying this month's date, curdate = new Date (year, month-1, DayOfMonth);
When displaying the last month's date, curdate = new Date (Prevyear, PrevMonth-1, Totaldaysofprevmonth-(Daysofprevmonth-i-1));
When displaying the next month's date, curdate = new Date (Nextyear, nextMonth-1, I-dayofmonth-daysofprevmonth + 2), plus 2 is because I is starting from 0 and itself is less 1,dayofmonth in retreat An extra time appears when the date of this month is displayed.
Finally, let's look at what _buildcell did:
Copy Code code 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, this calendar control is intended to be an array of mappings that the user can pass in the date and the link that corresponds to that date at initialization time. That is this.datelinkmappings, when building a cell, if the date being built is included in the this.datelinkmappings, the current cell is constructed into a <a> form, otherwise the normal text form.
OK, the implementation logic is roughly the same, the end of the article to see the effect of the demo:
The front call code is as follows:
Copy Code code 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 Download Address
