A Simple Calendar Algorithm Based on js

Recently, there is a calendar that needs to edit text. In order to bind data conveniently, I wrote a set of calendars with js. In fact, my idea is very simple.

The implementation steps are as follows:

1. First, get the total number of days in the processing month

JS does not provide this parameter, so we need to calculate it. Considering that the leap year problem will affect the number of days in February, we first write a self-made function to judge the leap year:

function is_leap(year) {
 return (year%100==0?res=(year%400==0?1:0):res=(year%4==0?1:0));
}

2. Then define an array of the total number of days in the month including 102 months:

m_days=new Array(31,28+is_leap(ynow),31,30,31,31,30,31,30,31,30,31);

3. In the array of m_days, the information of leap year has been added to the days in February: 28+is_leap (ynow). The array element starts at 0, which corresponds exactly to the getMonth return value provided by the Date function provided by JS, that is, 0 for January, 1 for February, 2 for March, and so on.

Thus, the monthly totals can be obtained as follows: m_days [x]. Where x is a natural number from 0 to 11.

4. Calculate the day of the week on the first day of the processing month

You can get it using getDay of the Date function, returning values from 0 to 6, 0 for Monday, 1 for Tuesday, 2 for Wednesday, and so on. The code is as follows (assuming that the processing time is March 2008):

n1str=new Date(2008,3,1);
firstday=n1str.getDay();

With two known conditions, the total number of days in the month and the day of the week on the first day of the month, the problem of the number of rows required in the table can be solved: (the number of days in the current month + the day of the week on the first day) divided by 7. Table functions require integers, so we use Math. ceil to handle:

tr_str=Math.ceil((m_days[mnow] + firstday)/7);

The tr tag in the table actually represents the row of the table, so the variable tr_str is an important basis for us to write down the table.

5. Print the calendar table

You can do this by nesting two for statements: the outer for statement writes rows and the inner for statement writes cells.

for(i=0;i<tr_str;i++) { // Rows of a table 
 　　 for(k=0;k<7;k++) { // Cells per row of the table 
  　　  　　  idx=i*7+k; // Cell natural sequence number 
  　　  　　  date_str=idx-firstday+1; // Calculation date 
  　　  　　  (date_str<=0 || date_str>m_days[mnow]) ? date_str="&nbsp;" : date_str=idx-firstday+1; // Filter invalid dates (less than or equal to zero, greater than the total number of days in the month) 
  　　  　　  $(".date-info .date").last().append("<td class='day'>" + date_str + "</td>");
 　　 }
}

Whether the natural sequence number of a cell represents a valid date is critical, so a filtering mechanism must be added: only valid dates are printed. Valid date is greater than 0, less than or equal to the total number of days in the processing month.

6. Last month and next month

if(mnow<=0){
 　　 mnow=11;
 　　 ynow=ynow-1;
}else{
 　　 mnow--;
}

if(mnow>=11){
 　　 mnow=0;
 　　 ynow=ynow+1;
}else{
 　　 mnow++;
}

When getting the last month, pay attention to it in January; When getting the next month, pay attention to it by December.

When rendering, you need to remove the old calendar before adding a new one.

var nstr = new Date();
var ynow = nstr.getFullYear();
var mnow = nstr.getMonth();
var dnow = nstr.getDate();
var mnow_real = mnow;
calendar(nstr,ynow,mnow,dnow);
monDetail(ynow,mnow_real);

function monDetail(ynow,mnow){
 mnow_real = mnow+1;
 $(".month-detail").html(ynow+"-"+ mnow_real); // Show the current year and month 
}

function is_leap(year) { // Determine whether it is a leap year 
 return (year%100==0?res=(year%400==0?1:0):res=(year%4==0?1:0));
}

function preMonth(){ // Upper 1 Months 
 console.log(mnow);
 if(mnow<=0){
 mnow=11;
 ynow=ynow-1;
 }else{
 mnow--;
 } 
 calendar(nstr,ynow,mnow,dnow);
 monDetail(ynow,mnow);
}

function nextMonth(){ // Under 1 Months 

 if(mnow>=11){
 mnow=0;
 ynow=ynow+1;
 }else{
 mnow++;
 }
 calendar(nstr,ynow,mnow,dnow);
 monDetail(ynow,mnow);

}

function calendar(nstr,ynow,mnow,dnow){
 $(".date-info tr.date").remove(); / When changing a month, remove the old date first 
 var nlstr = new Date(ynow,mnow,1); // The first day of the month 1 Days 
 var firstday = nlstr.getDay(); // No. 1 1 Day and week 

 var m_days=new Array(31,28+is_leap(ynow),31,30,31,31,30,31,30,31,30,31); // Days per month 

 var tr_str=Math.ceil((m_days[mnow] + firstday)/7); // Days of Current Month + No. 1 1 Day is the number of days of the week   Obtain   Number of table rows 
 var i,k,idx,date_str;
 for(i=0;i<tr_str;i++) { // Rows of a table 
 $(".date-info tbody").append("<tr class='date'></tr>");
 for(k=0;k<7;k++) { // Cells per row of the table 
 idx=i*7+k; // Cell natural sequence number 
 date_str=idx-firstday+1; // Calculation date 
 (date_str<=0 || date_str>m_days[mnow]) ? date_str="&nbsp;" : date_str=idx-firstday+1; // Filter invalid dates (less than or equal to zero, greater than the total number of days in the month) 
 $(".date-info .date").last().append("<td class='day'>" + date_str + "</td>");
 }
 
 }
}