First of all, I would like to thank this calendar-linked video recorded in the wonderful classroom, which is just sorted out so that you can see it easily.
I. Let's talk about the following functions:
1. Click "OK" to display the calendar
2. Click hide again or delete the calendar from the DOM. For example, repeat steps 1, 2, and 2.
3. display the date of the current month in the calendar (number of days and number of days per day ).
4. Match the date and day of the current month.
5. Associate the calendars on the left side.
Ii. Let's talk about the HTML structure.
1. The blue DIV above shows the current month, and the previous month and next month.
2. The following date and week are stored in a table structure. Thead is used for the week, and tbody is used for the date.
Iii. Function Analysis:
3.1 What are the first two functions?
It reminds me of using toggle in JQUERY. This can be easily solved.
3.2. How many days of the current month are displayed in the calendar?
Since it is related to the date, we will definitely think of the Deta object. In this object, we can obtain or set the days of a certain year, day, month, day, or week. However, you cannot directly obtain the number of days in a month .? What should we do?
So we can only use judgment. Based on the value of the current month. To save the number of days to a variable. (The current month obtained by the object must be + 1. It starts from scratch ).
For example, the current date is January 1, which is determined to be large. Therefore, the variable contains the value 31, indicating that there are 31 days in the month.
3.3. Set the date of the current month to the day of the week .??
The solution to this problem is to obtain the day of the week corresponding to No. 1 in the current month. The following parts can be arranged in sequence. I understand that because the TD tags are used to store the date, the TD indexes in the TBODY are all arranged. Therefore, insert No. 1 to the TD, the second part is inserted into the next TD.
3.4 associate the calendars on the left side.
The key here is "association": I recently wrote "Countdown", and then "linked Calendar". It reminds me of the "linkage drop-down menu ", for example, the drop-down menu linking provinces and cities is involved in "association ".
I have summarized that something that requires "association" must have a "point". Other changes must be associated with this point, in this way, other things associated with this point will change, and the effect of "linkage" will be achieved.
For example, in the last "Countdown", the "point" is the "Total milliseconds" between the current time and the preset time ". The time, minute, and second displayed in the countdown are associated with the total number of milliseconds. As long as the total number of milliseconds changes, the time, minute, and second will change, this is "linkage.
The "point" in this calendar interaction is the year and month obtained after the current date object is created. Set the display items on the right based on the year and month. As long as the current year, month, and change are obtained, the following will naturally change. That is, "linkage.
Of course, there are still a little details to deal.
4. The code is too long, so only the structure is put. You can download the final DEMO of the article from the content.
The Code is as follows:
$ (Function (){
Var nowDate = $ (". nowDate"), // Calendar box on the left
NextDate = $ (". nextDate"), // Calendar box on the right
LstrTd = "", // DOM structure of the row on the left date
RstrTd = "", // DOM structure of the right date row
Lrows = 0, // The number of rows on the left date
Rrows = 0, // number of rows on the right date
IHtmlNow = "", // calendar structure on the left
IHtmlNext = "", // The calendar structure on the right
NowTitleDateY = "", // year of the Left title
NowTitleDateM = "", // month displayed on the left
NowlastM = "", // monthly display on the left
NextTitleDateY = "", // Year of the right title
NextTitleDateM = "", // month displayed on the right
NextLastM = "", // monthly display on the right
Creatbtu = true, // only create the HTML structure once
NumDay = 0, // Number of days per month on the left;
RNumDay = 0, // Number of days per month on the left;
Lfday = 0, // the first day of the current month on the left, which is the day of the week
Rfday = 0; // the first day of the current month on the right, which is the day of the week
// Create a date row
Function creatTr (l, r ){
}
/* Create the date and year of the current and next month
* There are three cases: the current month is July 22, and the current month is July 22 ,.
*/
Function getTitleDate (){
Var odate = new Date ();
// If the current month is December, the month on the right should be January
// If the current month is November, the month on the right should be January
// If the current month is January, the month on the left should be December
}
/* Obtain the number 1 of the current month, which is the day of the week.
* First, set the year, month, and number of days of the date object you created. After setting these values, use the getDay () method, you can get the number of weeks on which you set the date;
*/
Function getfirstD (m1, y1, m2, y2 ){
}
// Obtain the number of days by month
Function getTdDay (m1, y1, m2, y2 ){
}
// Based on the input year parameter, determine whether it is a runyear, that is, it can be divisible by 4, but cannot be divisible by 100, when both are satisfied; or it can be divisible by 400;
Function isRunYear (y ){
}
// Create an HMTL Structure
Function creatHtml (creatbtu ){
// Based on the day of the week in the current month, several rows are generated to store all dates.
}
// Insert the date into the corresponding TD
Function insertdate (d, t ){
// Insert it to the left
// Insert to edge
}
// Insert to DOM
Function insertHtml (){
}
// Delete from the DOM
Function delHtml (){
}
// Click "OK" to display or hide the calendar
$ ("Input [type = button]"). toggle (function (){
// Add this judgment to prevent continuous clicking of the OK button
If (! NowDate. add (nextDate). is (": animated") & nowDate. add (nextDate). is (": empty ")){
// Obtain the year and month above the title
GetTitleDate ();
// Obtain the number of days in the left and right months
GetTdDay (nowTitleDateM, nowTitleDateY, nextTitleDateM, nextTitleDateY );
// Obtain the day of the week from the left and right months.
GetfirstD (nowTitleDateM, nowTitleDateY, nextTitleDateM, nextTitleDateY );
// Create an HTML Structure
CreatHtml ();
// Insert the structure into the DOM
InsertHtml ();
// Insert the date to the table TD on the left and right
Insertdate (lfday, rfday );
// Expand date
NowDate. add (nextDate). slideDown (200 );
}
}, Function (){
// Add this judgment to prevent continuous clicks
If (! NowDate. add (nextDate). is (": animated ")){
// Collapse the calendar
NowDate. add (nextDate). slideUp (200 );
// Delete the calendar structure from the DOM
DelHtml ();
}
});
})
4.1 analyze the code structure and see the annotations. the following steps:
1. Obtain the current year and month (linked "point ")
2. Obtain the number of days in the month on the left and right;
3. Obtain the number one in the left and right months, which corresponds to the day of the week.
4. With the above, we can create an HTML structure (because we have to sort the data in the month to decide whether to create five rows or six rows. To display the date)
5. Insert the created structure into the DOM.
6. Then insert the number of days, that is, the number of days, to the TD of the corresponding table storage date;
V. Summary
1. You do not need to process the TR branch, but just insert the td in the tbody as a whole array into it. (because the display is a number, it can be exactly the same)
2. "linkage" Rules
3. something similar to inserting a lot of data should be solved in a circular manner.
4. If there is a lot of data like this, it should be first stored in the array (because this example shows numbers, you can directly use the variables in the loop, if it is a value, store the data in the array and obtain the data according to the index)
Online Demo: http://demo.jb51.net/js/2012/mycalendar/
Download DEMO: mycalendar_jb51.rar
