Make calendar _jquery based on jquery calendar Plug-ins

Take a look at the final effect chart:

is a little ugly, don't spit me-. -

Let's start with the main logic of this calendar:

• A maximum of 31 days in a month requires a 7x6 form to load

• If you know a month 1th is the day of the week, the number of days in the month, a cycle can show a calendar of the month (the eyes are shining *.*)

• Add some controls to make the user easy to operate (for example, you can enter the year, month, you can click to select the year, month)

Create a new HTML file, HTML structure:

<div class= "Container" > <input type= "text" value= "" id= "Cal-input"/> <div class= "Cal-box" > <table > <thead> <tr> <td class= "Sun" > Day </td> <td> one </td> <td> two </td&gt
   ; <td> three </td> <td> four </td> <td> five </td> <td class= "STA" > Six </td> </tr > </thead> <tbody> <tr> <td></td> <td></td> <td></td&
   Gt <td></td> <td></td> <td></td> <td></td> </tr> <tr&gt
   ;
   <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td > <td></td> <td></td> <td></td> <td></td> <td>< /TD>
  </tr> <tr> <td></td> <td></td> <td></td> <td></t d> <td></td> <td></td> <td></td> </tr> <tr> <td>& lt;/td> <td></td> <td></td> <td></td> <td></td> &LT;TD&G t;</td> <td></td> </tr> <tr> <td></td> <td></td> ;td></td> <td></td> <td></td> <td></td> <td></td> &
 lt;/tr> </tbody> </table> </div> </div>

Add a bit of style in, open the browser to see the effect:

Thead td,tbody td{
  width:20px;
  Height:20px;<br><span class= "Styles-clipboard-only" > <span class= "Webkit-css-property" >text-ali GN: <span class= "expand-element" ><span class= "value" >center;</span></span></span> </span>
 }
 thead td.sun,thead td.sta{
  color: #eec877;
 }
 Tbody td{
  border:1px solid #eee;
 }

Looks good, but this is a plug-in, to write so many HTML code is unreasonable, should be inserted in the plug-in dynamically, so write is also for intuitive demonstration.

To start writing JS code, now to know that a month of 1th is the day of the week, easy to traverse the display of a month calendar out, where the use of Caille formula

PS: Briefly explain, Caille 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 of the year (2016, C is 20,y), M is the month, D is the date, the result of the week%7 is the day of the week
But 1, February as the last year of 13, 1 April to calculate, such as 2016.2.3, to convert to 2015.14.3 to use the Caille formula

Week is positive and negative when the modulus is not the same, negative when to (Week%7+7)%7, a positive number of direct model WEEK%7,

We also have to know how many days in this month, 1, 3, 5, 7, 8, 10, December is 31 days, 4, 6, 9, November is 30 days, February is the year of peace, excepting is 28 days, leap years is 29 days, leap year is divisible by 4 but can not be divisible by 100, well, with some premise, or can quickly write JS

$ (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 = = 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;
 
  Caille 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 (");　　　　
  Empty the original text text} for (var i = 0;i < i++) {$td. EQ (week% 7 +i). Text (i+1);
 } initcal (Year,month,day);
 })

Then open the browser to see, now the calendar is long like this

Turn on your mobile calendar look, it's March 16, well, it's a hairy one (proud face)

Now to add some controls in, two input boxes and four keys, the key is using the iconfont,html code as follows:

<div class= "Container" > <input type= "text" value= "" id= "Cal-input"/> <div class= "Cal-box" > <div C lass= "Cal-control-box" > <div class= "wif iw-bofangqixiayiqu Left" ></div> <div class= "Wif iw-iconfont -bofang left "></div> <input type=" "value=" "/> <span> year </span> <input type=" "Value=" " > <div class= "wif iw-iconfont-bofang Right" ></div> <div class= "wif iw-bofangqixiayiqu Right" >< /div> </div> <table> <thead> <tr> <td class= "Sun" > Date </td> <td>  ;/td> <td> two </td> <td> three </td> <td> four </td> <td> five </td> &LT;TD class= "STA" > Six </td> </tr> </thead> <tbody> <tr> <td></td> <t d></td> <td></td> <td></td> <td></td> <td></td> &L T;td></td>;/tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td > <td></td> <td></td> <td></td> <td></td> <td>< /TD> <td></td> </tr> <tr> <td></td> <td></td> <td&gt ;</td> <td></td> <td></td> <td></td> <td></td> </tr > <tr> <td></td> <td></td> <td></td> <td></td> & 
   lt;td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td&
   Gt <td></td> </tr> </tbody> </table> </div> </div>
 

Now the calendar looks like this.

　　

Now, to tie the buttons to the Click event, enter the box to bind the Change event

Change Month button
 $ (document). On (' click ', '. Iw-iconfont-bofang ', function () {
  if ($ (this). Hasclass (' left ')) {
  // Judge Plus or minus
  if (month = 1) {
   month =;
   year--;
  } else{
   month--
  }
  } else{
  if (month = =) {
   month = 1;
   Year + +;
  } else{
   month + +
  ;
  }
  Initcal (Year,month,day);
 })
 
 Change 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 to put the value of the year and month with the JQ Val () method, put in the input box is OK

Conclusion: Here is not written in the form of a plug-in, but this calendar to achieve the main idea of writing well, recently is also busy writing graduation thesis, there are a lot of things want to write down to share, always feel that time is not enough, next time to write how the calendar written as a chrome plugin, is the following this

I hope this article will help you with the jquery program design.