Look at the effect chart
first, the next function:
1. Click "OK" to display the calendar
2. Click Hide again, or remove the calendar from the DOM. Like some repetition first, and second these two steps.
3. Let the calendar display the current month date (how many days, what number per day).
4. Let the date of the current month correspond to the day of the week.
5. Connect the calendars on both sides of the left.
second, the next HTML structure.
1. The blue above is a div that shows the current monthly score, and last month, next month.
2. The following date and week are used to store data in a table structure. Week with THEAD, date with: tbody storage.
third, the function launches the analysis:
3.1, the first two functions?
Reminds me of using jquery inside the toggle. It is convenient to solve.
3.2, let the calendar display the number of the current month date?
Since it is related to the date, it will certainly remember the object of Deta. In this object, we can get or set a year, a day, a month, a day, a week. But just can't get direct access to how many days in these one months.? What do we do?
So we can only use judgment. Value based on the current month. To save the days in a variable. (The object gets the current month to +1.) Country it is calculated from zero).
For example, now is May, according to the judgment, May is big, so the variable is stored 31 of this value, that is, 31 days this month.
3.3. Let the date of the current month correspond to the day of the week.
The problem, the solution is to get to the month of the number, the corresponding day of the week. The back can be arranged in sequence. Here in order, I understand, because the storage date are TD tags, in the tbody of these TD index, are arranged well, so put a number into that TD, the back of the number second, will be inserted into the latter one of the TD.
3.4, let the left side of the calendar associated.
Here the emphasis is "relevance": I recently wrote the "Countdown", and then this "linkage calendar", but also reminds me of the "Linkage pull-down menu", such as provinces and cities linkage drop-down menu; These are all involved in the "linkage".
I have summed up, is the need for "linkage" of things, there must be a "point" (call it first), the other need to change, and the point associated with this, so change this point, the other related to this point, will change, also achieve the "linkage" of this effect.
For example, the last "Countdown", Inside the "point" is the current time and set the time, before the difference between the "total number of milliseconds." Countdown display, time, minutes, seconds, and this "total number of milliseconds" has relevance, as long as the "total number of milliseconds" change, then, minutes, seconds, will change, this is "linkage."
This calendar linkage, inside of the "point", is the current creation date object, obtained after the year, month. According to this year, month, go to set the right side, that is, the next month to show things. So as long as the current acquisition of the year, month, there are changes in the back of the natural will also change. Also "linkage".
Of course, there is a little bit more detail to deal with.
Four, on the code, too long, so only put the structure, the contents of the article can download the last demo
Copy Code code as follows:
$ (function () {
var nowdate = $ (". Nowdate"),//Left calendar box
Nextdate = $ (". Nextdate"),//Right calendar box
LSTRTD = "",//the DOM structure of the row of the left date
RSTRTD = "",//Right Date's DOM structure of the row
Lrows = 0,//left Date Line number
Rrows = 0,//Right Date Line number
Ihtmlnow = "",//left calendar structure
Ihtmlnext = "",//The structure of the calendar on the right
Nowtitledatey = "",//left title year
Nowtitledatem = "",//the month displayed on the left
Nowlastm = "",//on the left side of the month show
Nexttitledatey = "",//right title year
Nexttitledatem = "",//the month displayed on the right
Nextlastm = "",//on the right side of the month display
CREATBTU = True,//only create a switch to HTML structure once
Numday = 0,//The number of days per month on the left;
Rnumday = 0,//The number of days per month on the left;
Lfday = 0,//The first day of the current month on the left, the days of the week
Rfday = 0; The first day of the current month on the right, the days of the week
Create a Date Line
function Creattr (l,r) {
}
/* Create date and year for current and next one months
* There are three kinds of cases, the current month is December the current month is November, the current month is January
*/
function Gettitledate () {
var odate = new Date ();
If the current month is December, then the month on the right should be January.
If the current month is November, then the month on the right should be January.
If the current month is January, then the left of the month, it should be December
}
/* Gets the number of the current month, the day of the week
* First set the date you created the object of the year, month, and you need to know the number of days, after these settings, and then use the Getday () method, you can set the date of the number of weeks;
*/
function Getfirstd (m1,y1,m2,y2) {
}
Get days by Size month
function Gettdday (m1,y1,m2,y2) {
}
According to the incoming year parameters, to determine whether the run year, that can be divisible by 4, but not divisible by 100, while satisfying, or divisible by 400;
function Isrunyear (y) {
}
Creating a HMTL structure
function creathtml (CREATBTU) {
Based on the number of days of the current month, a few lines are generated to store all dates
}
Insert a date into the corresponding TD
function Insertdate (d,t) {
Insert to Left
Insert to Edge
}
Insert to DOM
function inserthtml () {
}
removing from the DOM
function delhtml () {
}
Click OK to show or hide the calendar
$ ("Input[type=button]"). Toggle (function () {
Plus this judgment is to prevent continuous click OK button
if (!nowdate.add (Nextdate). Is (": Animated") &&nowdate.add (Nextdate). Is (": Empty")) {
Get the year and month above the title
Gettitledate ();
Get the number of days for the left and right months
Gettdday (Nowtitledatem,nowtitledatey,nexttitledatem,nexttitledatey);
Get the left and right month a number is the day of the week
GETFIRSTD (Nowtitledatem,nowtitledatey,nexttitledatem,nexttitledatey);
Create HTML structure
Creathtml ();
Inserting a structure into the DOM
Inserthtml ();
Insert date to left and right table in TD
Insertdate (Lfday,rfday);
Expand Date
Nowdate.add (nextdate). Slidedown (200);
}
},function () {
Plus this judgment is to prevent successive clicks
if (!nowdate.add (Nextdate). Is (": Animated")) {
Put up your calendar
Nowdate.add (nextdate). Slideup (200);
To delete a calendar structure from the DOM
Delhtml ();
}
});
})
4.1 Analysis of this code structure to see the annotations can be understood, the following steps:
1. Get current year, month (linkage "point")
2. Get the number of days on the left and right corresponding month;
3. To the left and right to the middle of the month, which corresponds to the number of days of the week
4. With the above, we can create the HTML structure (because we have to decide, by the date of the month, whether to create five or six lines.) To display the date)
5. Will create a good structure, inserted into the DOM
6. The number of days to be obtained, that is, the date, inserted into the corresponding form of the date of the TD;
v. Summary
1. Do not have to handle the TR branch, only to take the TD inside the TBODY as a whole array, insert data into it;
2. The "linkage" rule
3. Something like this inserts a lot of data, it needs to be solved.
4. Like this data, should be stored in the array first (because this example shows a number, so you can directly use the variables inside the loop, if it is a value, first stored in the array, according to the index)
Online Demo: http://demo.jb51.net/js/2012/mycalendar/
Demo Download: Mycalendar_jb51.rar
