Detailed explanation of the use of js Calender control

Author：Eve Cole Update Time：2025-05-26 06:32:01

I've been rushing for projects lately. The project is finally in a stable state now, just revisions. As a background programmer, I am really hard. I have to write everything from the web to the mobile interface, which is a lot of things. . . I finally got idle these two days. I looked at some functions about js dates and suddenly thought of the calendar control. So I tried to write one. As a background programmer, I am limited in my level. Let’s take a learning attitude and look at the example I wrote. . .

First, a commonly used date function: Date(year, month, day)

The code copy is as follows:

var date=new Date();

Get Year

The code copy is as follows:

var year=this.date.getFullYear();

Get month, here is the monthly index so you need +1

The code copy is as follows:

var month=this.date.getMonth()+1;

What day is the acquisition date

The code copy is as follows:

var day=this.date.getDate();

Get the day of the week, return 0. Sunday 1. Monday 2. Tuesday 3. Wednesday 4. Thursday 5. Friday 6. Saturday

The code copy is as follows:

var week=this.date.getDay();

Get what day of the week it is on that month

The code copy is as follows:

var getWeekDay=function(year,month,day){

var date=new Date(year,month,day);

return date.getDay();

}

var weekstart= getWeekDay(this.year, this.month-1, 1)

Get the number of days in the month

The code copy is as follows:

var getMonthDays=function(year,month){

var date=new Date(year,month,0);

return date.getDate();

}

var monthsdays= this.getMonthDays(this.year,this.month);

Okay, we have only used so many parameters. The following is actually some operations and judgments about the date corresponding to the week, dynamic splicing labels. Let’s directly post the example I wrote:

The code copy is as follows:

<html>

<head>

td{ text-align: center;}

</style>

window.onload=function(){

var Calender=function(){

this.Init.apply(this,arguments);

}

Calender.prototype={

Init:function(container, options){

this.date=new Date();

this.year=this.date.getFullYear();

this.month=this.date.getMonth()+1;

this.day=this.date.getDate();

this.week=this.date.getDay();

this.weekstart=this.getWeekDay(this.year, this.month-1, 1);

this.monthdays= this.getMonthDays(this.year,this.month);

this.containerDiv=document.getElementById(container);

this.options=options!=null?options:{

border:'1px solid green',

width:'400px',

height:'200px',

backgroundColor:'lightgrey',

fontColor:'blue'

}

getMonthDays:function(year,month){

var date=new Date(year,month,0);

return date.getDate();

getWeekDay:function(year,month,day){

var date=new Date(year,month,day);

return date.getDay();

View:function(){

var tablestr='<table>';

tablestr+='<tr><td colspan="3"></td><td>Year:'+this.year+'</td><td colspan="3">month:'+this.month+'</td></tr>';

tablestr+='<tr><td>day</td><td>one</td><td>two</td><td>three</tw</td><td>five</tw</td><td>six</td></tr>';

var index=1;

//Judge where the first day of each month is

var style='';

if(this.weekstart<7)

{

tablestr+='<tr>';

for (var i = 0; i <this.weekstart; i++) {

tablestr+='<td></td>';

};

for (var i = 0; i < 7-this.weekstart; i++) {

style=this.day==(i+1)?"background-Color:green;":"";

index++;

tablestr+='<td style="'+style+'" val='+(this.year+'-'+this.month+'-'+(i+1))+'>'+(i+1)+'</td>';

};

tablestr+='</tr>';

}

///The position corresponding to the remaining days

//Judge integer rows and correspond to corresponding positions

var remaindays=this.monthdays-(7-this.weekstart);

var row=Math.floor(remaindays%7==0?remaindays/7:((remaindays/7)+1)));

var count=Math.floor(remaindays/7);

for (var i = 0; i < count; i++) {

tablestr+='<tr>';

for (var k = 0; k < 7; k++) {

style=this.day==(index+k)?"background-Color:green;":"";

tablestr+='<td style="'+style+'" val='+(this.year+'-'+this.month+'-'+(index+k))+'>';

tablestr+=index+k;

tablestr+='</td>';

};

tablestr+='</tr>';

index+=7;

};

//The corresponding position of the last remaining days (cannot fill in those days of a week)

var remaincols=this.monthdays-(index-1);

tablestr+='<tr>';

for (var i = 0; i < remaincols; i++) {

style=this.day==index?"background-Color:green;":"";

tablestr+='<td style="'+style+'" val='+(this.year+'-'+this.month+'-'+(index))+'>';

tablestr+=index;

tablestr+='</td>';

index++;

};

tablestr+='</tr>';

tablestr+='</table>';

return tablestr;

Render:function(){

var calendarDiv=document.createElement('div');

calendarDiv.style.border=this.options.border;

calendarDiv.style.width=this.options.width;

calendarDiv.style.height=this.options.height;

calendarDiv.style.cursor='pointer';

calendarDiv.style.backgroundColor=this.options.backgroundColor;

// calendarDiv.style.color=this.options.fontColor;

calendarDiv.style.color='red' ;

calendarDiv.onclick=function(e){

var evt=e||window.event;

var target=evt.srcElement||evt.target;

if(target&&target.getAttribute('val'))

{

alert(target.getAttribute('val'));

}

var tablestr=this.View();

this.tablestr=tablestr;

calendarDiv.innerHTML=tablestr;

var div=document.createElement('div');

div.style.width='auto';

div.style.height='auto';

div.appendChild(calenderDiv);

///Page turn div

var pagerDiv=document.createElement('div');

pagerDiv.style.width='auto';

pagerDiv.style.height='auto';

var that=this;

///Reset parameters

var resetPara=function(year,month,day){

that.date=new Date(year,month,day);

that.year=that.date.getFullYear();

that.month=that.date.getMonth()+1;

that.day=that.date.getDate();

that.week=that.date.getDay();

that.weekstart=that.getWeekDay(that.year, that.month-1, 1);

that.monthdays= that.getMonthDays(that.year,that.month);

}

//Previous page

var preBtn=document.createElement('input');

preBtn.type='button';

preBtn.value='<';

preBtn.onclick=function(){

that.containerDiv.removeChild(div);

resetPara(that.year,that.month-2,that.day);

that.Render();

}

//Next page

var nextBtn=document.createElement('input');

nextBtn.type='button';

nextBtn.value='>';

nextBtn.onclick=function(){

that.containerDiv.removeChild(div);

resetPara(that.year, that.month, that.day);

that.Render();

}

pagerDiv.appendChild(preBtn);

pagerDiv.appendChild(nextBtn);

div.appendChild(pagerDiv);

var dropDiv=document.createElement('div');

var dropdivstr='';

//Select year

dropdivstr+='<select id="ddlYear">';

for (var i = 1900; i <= 2100; i++) {

dropdivstr+=

i==that.year

?'<option value="'+i+'" selected="true">'+i+'</option>'

: '<option value="'+i+'">'+i+'</option>';

};

dropdivstr+='</select>';

//Select month

dropdivstr+='<select id="ddlMonth">';

for (var i = 1; i <= 12; i++) {

dropdivstr+=

i==that.month

?'<option value="'+i+'" selected="true">'+i+'</option>'

: '<option value="'+i+'">'+i+'</option>';

};

dropdivstr+='</select>';

dropDiv.innerHTML=dropdivstr;

div.appendChild(dropDiv);

that.containerDiv.appendChild(div);

///Bind the event that selects year and month

var ddlChange=function(){

var ddlYear=document.getElementById('ddlYear');

var ddlMonth=document.getElementById('ddlMonth');

var yearIndex=ddlYear.selectedIndex;

var year=ddlYear.options[yearIndex].value;

var monthIndex=ddlMonth.selectedIndex;

var month=ddlMonth.options[monthIndex].value;

that.containerDiv.removeChild(div);

resetPara(year,month-1,that.day);

that.Render();

}

ddlYear.onchange=function(){

ddlChange();

}

ddlMonth.onchange=function(){

ddlChange();

}

var calendar=new Calender('dvTest',{

border:'1px solid green',

width:'400px',

height:'200px',

backgroundColor:''

}

);

calendar.Render();

}

</script>

</head>

<body>

</body>

</html>

The code has been changed again and the view's table is replaced with a div, in order to solve the read-only problem of IE's tableinnerHTML. In addition, options are added for configurability.

The above code has a simple explanation, the function is the most basic, and if you do it more in-depth, you can expand it.