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