This example shares the specific code for JS to implement calendar effects for your reference. The specific content is as follows
html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Calendar plugin</title>
<link rel="stylesheet" href="./css/" >
<link rel="stylesheet" href="./css/" >
</head>
<body>
<div class="show">
<button >Last month</button>
<span >2019-01</span>
<button >Next month</button>
</div>
<div class="box" >
</div>
</body>
<script>
// Get the first day of this month function getMonthDay(date){
date=new Date(())
(1);
return date
}
// Get the last day of the month function getMonthLastDay(date){
date=new Date(())
(()+1);
(0);
return date
}
//Get the collection of time objects for this month function getMonth(date){
var arr=[]
// Get the first day of this month var _date=getMonthDay(date)
// // Get the last day of the month var dataLast=getMonthLastDay(date).getDate()
(new Date(_date.valueOf()))
// Process the first day of this month to the last day of this month for(var i =1;i<dataLast;i++){
_date.setDate(_date.getDate()+1)
(new Date(_date.valueOf()))
}
// Complete forward and reset to the first day of this month _date=getMonthDay(date)
var forln=_date.getDay()
for(var i=0;i<forln;i++){
_date.setDate(_date.getDate()-1)
(new Date(_date.valueOf()))
}
// Complete backwards and reset to the last day of the month _date=getMonthLastDay(date)
forln=_date.getDay()
for(var i=forln;i<6;i++){
_date.setDate(_date.getDate()+1)
(new Date(_date.valueOf()))
}
return arr
}
// Render the collection to the page function renderTable(monthDateArr,date){
("showtime").innerHTML=`${()}-${()+1}`
var table=('table')
var trTh=('tr')
=`
<th>Sunday</th>
<th>on Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
`
(trTh)
var tr=('tr')
for(let i in monthDateArr){
var td=('td')
=monthDateArr[i].getDate()
(td)
if((i*1+1)%7===0){
(tr)
tr=('tr')
}else if(i == -1){
(tr)
}
}
("box").innerHTML=
}
var date=new Date()
('pre').onclick=function(){
(1)
(()-1)
renderTable(getMonth(date),date)
}
('next').onclick=function(){
(1)
(()+1)
rrenderTable(getMonth(date),date)
}
renderTable(getMonth(date),date)
</script>
</html>
css code
.box{
width: 700px;
margin: 0 auto;
box-sizing: border-box;
padding: 0 1px;
}
table{
width: 100%;
}
th,td{
width:100px;
text-align: center;
}
th{
height: 30px;
line-height: 30px;
background: #e0e5e5;
}
td{
height: 70px;
line-height: 70px;
background: #f3f5f5;
}
.show{
display: flex;
align-items: center;
justify-content: center;
}
For more exciting content, please click on the topic"Summary of usage methods of javascript calendar plug-in"Carry out learning
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.