jQuery linked calendar implementation code_jquery

Let’s take a look at the renderings

1. Let’s talk about the functions first:

1. Click “OK” to display the calendar
2. Click again to hide, or delete this calendar from the DOM. Repeat steps one and two like this.
3. Let the calendar display the current month date (how many days, what number is each day).
4. Let the date of the current month correspond to the day of the week.
5. Associate the calendars on the left side.

2. Let’s talk about the HTML structure.

1. The blue one above is a DIV that displays the current month, the previous month, and the next month.
2. The following date and week use a table structure to store data. The day of the week is stored in thead, and the date is stored in: tbody.

3. Function expansion analysis:

3.1. The first two functions?
Reminds me of using the toggle in JQUERY. It can be solved easily.

3.2. Let the calendar display the number of dates in the current month?
Since it is related to dates, the object Deta will definitely come to mind. In this object, we can get or set a certain year, a certain day, a certain month, a certain day, and a certain day of the week. But it is not possible to directly obtain the number of days in this month. ? What to do?
So we can only use judgment. Based on the current month's value. Let's save the number of days into a variable. (The current month obtained by the object must be 1. It is calculated from zero).
For example, it is May now. According to judgment, May is a big day, so the value 31 is stored in the variable; that is, this month has 31 days.

3.3. Make the date of the current month correspond to the day of the week.? ?
The solution to this problem is to get the first day of the month and the corresponding day of the week. The following ones can be arranged in order. What I understand about the sequential arrangement here is that because the dates are stored in TD tags, the indexes of these TDs in TBODY are all arranged, so insert number 1 into that TD, and the following number 2 will be Inserted into the latter TD.

3.4. Connect the calendars on the left side.

The focus here is "association": I recently wrote "countdown", and then this time "linkage calendar", and it reminded me of "linkage drop-down menu", such as linkage drop-down menu for provinces and cities Menu; these all involve "linkage".
I summed it up, that is, things that need to be "linked" must have a "point" (let's call it that for now), and other changes that need to be made must be related to this point. When linked together, if this point is changed in this way, other things related to this point will also change, thus achieving the effect of "linkage".

For example, in the last "countdown", the "point" in it is the "total number of milliseconds" difference between the current time and the set future time. The hours, minutes, and seconds displayed in the countdown are all related to the "total milliseconds". As long as the "total milliseconds" changes, the hours, minutes, and seconds will all change. This is "linkage".

In this calendar linkage, the "point" in it is the year and month obtained after the current date object is created. According to the year, month, come and go, set the right side, that is, what should be displayed next month. Then as long as the currently obtained year and month change, the subsequent ones will naturally change. It’s also “linked”.
Of course there are still some small details to deal with.

4. The code is too long, so I only put the structure. The content inside can be downloaded from the DEMO at the end of the article

Copy code The code is as follows:

$(function(){
var nowDate = $(".nowDate"), //Calendar box on the left
nextDate = $(".nextDate"), //Calendar on the right Box
lstrTd = "", //DOM structure of the left date row
rstrTd = "", //DOM structure of the right date row
lrows = 0, //Number of left date rows
rrows = 0, //Number of right date rows
iHtmlNow = "", //Calendar structure on the left
iHtmlNext = "", //Structure of the calendar on the right
nowTitleDateY = "", // Title year on the left
nowTitleDateM = "", //Month displayed on the left
nowlastM = "", //Month display on the left
nextTitleDateY = "", //Title year on the right
nextTitleDateM = "", //The month displayed on the right
nextLastM = "", //The month displayed on the right
creatbtu = true, //The switch to only create the HTML structure once
NumDay = 0, //The left The number of days in each month;
rNumDay = 0, //The number of days in each month on the left;
lfday = 0, //The first day of the current month on the left is the day of the week
rfday = 0; / /The first day of the current month on the right is the day of the week
//Create date row
function creatTr(l,r){
}
/*Create the date and year of the current and next month
* There are three situations here. The current month is December, the current month is November, and 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 minute, then the month on the left should be December
}
/*Get the first day of the current month, which day of the week it is
*First set the year in which you created the date object , month, and the number of days you need to know. After setting these, use the getDay() method to get the number of weeks you set the date;
*/
function getfirstD(m1,y1 ,m2,y2){
}
//Get the number of days based on the size of the month
function getTdDay(m1,y1,m2,y2){
}
//According to the incoming year parameter , determine whether it is a RunYear, that is, it can be divisible by 4, but not divisible by 100, when both are satisfied; or can be divisible by 400;
function isRunYear(y){
}
//Create HMTL structure
function creatHtml(creatbtu){
//According to the day of the week when the first day of the current month is, generate several rows to store all dates
}
//Insert the date into the corresponding TD
function insertdate(d,t){
//Insert to the left
//Insert to the side
}
//Insert into the DOM
function insertHtml(){
}
//Delete from DOM
function delHtml(){
}
//Click OK to show 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" )){
//Get the year and month above the title
getTitleDate();
//Get the days of the month on the left and right
getTdDay(nowTitleDateM,nowTitleDateY,nextTitleDateM,nextTitleDateY);
//Get the first day of the week on the left and right
getfirstD(nowTitleDateM,nowTitleDateY,nextTitleDateM,nextTitleDateY);
//Create HTML structure
creatHtml();
//Will The structure is inserted into the DOM
insertHtml();
//Insert the date into the left and right tables TD
insertdate(lfday,rfday);
//Expand the 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 You can understand this code structure by looking at the comments. The following steps:
1. Get the current year and month ( Linked "point")
2. Get the number of days in the corresponding month on the left and right;
3. Get the number one of the month on the left and right, which correspond to the day of the week respectively
4. With the above things , we can create the HTML structure (because we need to decide whether to create five or six lines according to the arrangement of the dates in the month. to display the date)
5. Insert the created structure into the DOM
6. Then insert the obtained number of days, that is, the date number, into the TD of the corresponding table to store the date;

5. Summary

1. There is no need to process the TR in separate lines, just use the td in the tbody as a whole array, and insert data into it; (because numbers are displayed , just right and)

2. "Linkage" rules

3. Things like inserting a lot of data need to be solved with loops.

　4. If there is a lot of data like this, it should be stored in the array first (because this example displays numbers, so you can directly use the variables in the loop. If it is a value, it should be stored in the array first and taken out according to the index)

Online demo: http://demo.jb51.net/js/2012/mycalendar/
DEMO download: mycalendar_jb51.rar