Create a calendar based on the jQuery calendar plug-in

This article mainly describes how to create a calendar based on the jQuery calendar plug-in. For more information, see the following:

It's a bit ugly. Don't bother me -. -

First, let's talk about the main production logic of this calendar:

· A Month can have 31 days at most, and a 7x6 Table is required for loading.

· If you know the day of the week on the first day of a month and the number of days of the month, you can see the calendar of a month in a cycle (eyes are shining *.*)

· Add some controls to make it easy for users to operate (for example, you can enter the year and month, you can click to select the year and month)

Create an html file with the following html structure:

  
 
 
 
  
  
  
 
   
 
    
Day
 
    
I
 
    
II
 
    
3.
 
    
Thu
 
    
V.
 
    
Sat.
 
   
 
  
  
  
  
 
   
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
   
 
   
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
   
 
   
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
   
 
   
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
   
 
   
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
   
 
   
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
   
 
  
 
 
 
 

Add a style to the page and open the browser to see the effect:

thead td,tbody td{  width: 20px;  height: 20px;
 　　　　　　 text-align: center; } thead td.sun,thead td.sta{  color: #eec877; } tbody td{  border: 1px solid #eee; }

It looks good, but this is a plug-in. It is unreasonable to write so many html code. It should be inserted dynamically inside the plug-in. This write is also for intuitive demonstration.

I want to start writing JS Code. Now I want to know the day of the week on the first day of a month, so that I can easily traverse and display the calendar of a month. Here I use the caile formula.

PS: a simple explanation,Caile Formula: Var week = y + parseInt (y/4) + parseInt (c/4)-2 * c + parseInt (26 * (m + 1)/10) + d-1;

C is the first two digits of the Year, y is the last two portions of the Year (2016, c is 20, y is 16), m is the month, d is the date, the result after week % 7 is the day of the week.
However, the 1st and 1st months are calculated as the 13th and 14th months of the previous year. For example, in 2016.2.3, it must be converted to 2015.14.3 to use the caile formula.

When week is a positive number or a negative number, the modulo is different. When a negative number is used, week % 7 + 7% 7 is required. When a positive number is used, week % 7 is directly used,

You also need to know the number of days in this month. The values of 1, 3, 5, 7, 8, 10, and December are 31 days, and the values of 4, 6, 9, and November are 30 days, the year February is divided into a leap year and a year, with a year of 28 days and a year of 29 days. A leap year can be divisible by four but cannot be divisible by 100, still can write JS soon

$ (Function () {var $ td = $ ('tbody '). find ('td '); var date = new Date (), year = date. getFullYear (), month = date. getMonth () + 1, day = date. getDate (), days; function initCal (yy, mm, dd) {if (mm = 2 & yy % 4 = 0 & yy % 100! = 0) {days = 28 ;} else if (mm = 1 | mm = 3 | mm = 5 | mm = 7 | mm = 8 | mm = 10 | mm = 12) {days = 31;} else if (mm = 4 | mm = 6 | mm = 9 | mm = 11) {days = 30 ;} else {days = 29;} var m = mm <3? (Mm = 1? 13: 14): mm; yy = m> 12? Yy-1: yy; var c = Number (yy. toString (). substring (0, 2), y = Number (yy. toString (). substring (2, 4), d = 1; // caile formula var week = y + parseInt (y/4) + parseInt (c/4) -2 * c + parseInt (26 * (m + 1)/10) + d-1; week = week <0? (Week % 7 + 7) % 7: week % 7; for (var I = 0; I <42; I ++) {$ td. eq (I ). text (''); // clear the original text} for (var I = 0; I <days; I ++) {$ td. eq (week % 7 + I ). text (I + 1) ;}} initCal (year, month, day );})

Open the browser and check that the current calendar is long.

Open your cell phone calendar and have a look at it. It's March. Well, it looks like a feather (proud face)

Now you need to add some controls, two input boxes and four buttons. The iconfont is used for the buttons. the html code is as follows:

  
 
  
  
  Year  
  
 
 
 
 
  
  
  
 
   
 
    
Day
 
    
I
 
    
II
 
    
3.
 
    
Thu
 
    
V.
 
    
Sat.
 
   
 
  
  
  
  
 
   
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
   
 
   
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
   
 
   
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
   
 
   
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
   
 
   
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
   
 
   
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
   
 
  
 
 
 
 

The current calendar is long.

　　

Now we can bind a click event to all the buttons, and a change event to the input box.

// Change the month button $ (document ). on ("click ",". iw-iconfont-bofang ", function () {if ($ (this ). hasClass ("left") {// judge whether to add or subtract if (month = 1) {month = 12; year -- ;} else {month --;}} else {if (month = 12) {month = 1; year ++;} else {month ++ ;}} initCal (year, month, day );}) // change the year $ (document ). on ("click ",". iw-bofangqixiayiqu ", function () {if ($ (this ). hasClass ("left") {year --;} else {year ++;} initCal (year, month, day) ;}// year Input $ (document ). on ("change", "input. cal-year ", function () {year = $ (this ). val (); initCal (year, month, day) ;}// month Input $ (document ). on ("change", "input. cal-month ", function () {month = $ (this ). val (); initCal (year, month, day );})

By the way, in the initCal () function, use the val () method of JQ to set the year and month values to the input box.

Conclusion: I have not written a plug-in here, but I have written the main idea of implementing this calendar. Recently I have been busy writing my graduation thesis. There are many things I want to write down and share, I always feel that time is not enough. Next time I write this calendar into a chrome plug-in, I will write the following:

I hope this article will help jquery program design.