First, let's explain the set() method in the most critical Date() class in this Demo.
var date=new Date();
date.setYear(2017);
date.setDate(0);As the code is visible. setYear() is to set the year for the current date, such as setYear(2016), and then a series of get methods are implemented according to 2016.
What is the role of setDate(0)? It's the last day of the last month. For example, in May, getDate() after setDate(0) is equal to 30;
Okay, let's go ahead with the rendering. 
The images uploaded by csdn are not very high-definition, and the interface may not be particularly beautiful. But basically it's all done. You can change the css yourself if you need to.
Then paste the code.
Html code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Custom Calendar</title>
<link rel="stylesheet" type="text/css" href="03.css">
<script type="text/javascript" src="03.js"></script>
</head>
<body>
<div id="container">
<div id="parent">
<div id="header">
<button class="btn1" id="btn1" onclick="last()"><</button>
<div id="header_month">5 month</div>
<button class="btn1" id="btn2" onclick="next()">></button>
</div>
<div id="center">
<table id="table_center" border="1" frame="all" rules="all">
<tbody>
<tr id="center_tr1"></tr>
</tbody>
</table>
</div>
<div id="footer">
<table id="footer_table" frame="all" rules="all"></table>
</div>
</div>
</div>
<script>
addWeek();
</script>
</body>
</html>Next comes the js code
var arrays = ["day", "One", "Two", "Three", "Four", "Five", "Six"];
var static_month= 0,static_year= 0,static_day=0;
/*Additional Weeks*/
function addWeek() {
var tr1 = document.getElementById("center_tr1");
var i;
arrays.forEach(function (data, i) {
var td1 = document.createElement("td");
td1.innerHTML = data;
td1.className = "table_td1";
tr1.appendChild(td1);
});
syncTime();
setStart();
}
/*Click Events Last Month*/
function last(){
if(static_month>0){
static_month--;
addDays(static_year,static_month);
}else {
static_month=11;
static_year--;
addDays(static_year,static_month);
}
}
/*Next month's click event*/
function next(){
if(static_month<11){
static_month++;
addDays(static_year,static_month);
}else{
static_month=0;
static_year++;
addDays(static_year,static_month);
}
}
/*Display date on first entry*/
function setStart() {
var date = new Date();
var months = date.getMonth();
static_month=months;
static_year=date.getFullYear();
static_day=date.getDate();
drawTable();
addDays(static_year,months);
}
/*Add date, number of years and months passed in*/
function addDays(year,months) {
var date = new Date();
/*Get the corresponding year of the system today*/
var thisYear=date.getFullYear();
/*Change system year*/
date.setYear(year);
/*Get the date of the day*/
var thisDate=date.getDate();
console.log("Today:" + thisDate);
var thisMonth=date.getMonth();
console.log("Current month:" + thisMonth+"Static:"+static_month);
document.getElementById("header_month").innerHTML=date.getFullYear()+"year\t "+(months+1)+"month";
/*How many days are there in the current month?*/
date.setMonth(months + 1);
date.setDate(0);
var thisDay = date.getDate();
console.log("On the last day of the month" + thisDay + "Number");
date.setMonth(months);
/*What day is the first day of the month?*/
date.setDate(1);
var thisWeek = date.getDay();
console.log("The first day of the current month is the week." + thisWeek);
/*Get the last day of last month*/
date.setDate(0);
var lastDay = date.getDate();
console.log("Last day of last month" + lastDay + "Number");
/*Number of insertion days, first empty the previous insertion*/
var td_class=document.getElementsByClassName("day_td_class");
td_class.innerHTML="";
var x=1;j=1;
for (var i = 1; i <= 42; i++) {
var td1 = document.getElementById("day_td"+ i);
/*The remaining days of last month*/
if(i<thisWeek+1){
td1.style.color="#888";
td1.innerHTML = (lastDay-thisWeek)+i;
}
/*Days of the month*/
else if(i<=thisDay+thisWeek){
td1.style.color="#fff";
if(x==thisDate&&thisMonth==static_month&&thisYear==static_year){
td1.style.color="#ff0000";
}
td1.innerHTML =x;
x++;
}
/*Days of next month*/
else{
td1.style.color="#888";
td1.innerHTML=j;
j++;
}
}
}
/*Draw tables*/
function drawTable() {
var i, j;
var d = 1;
var table1 = document.getElementById("footer_table");
for (j = 0; j < 6; j++) {
var tr1 = document.createElement("tr");
for (i = 0; i < 7; i++) {
var td1 = document.createElement("td");
td1.id = "day_td" + d;
td1.className = "day_td_class";
d++;
tr1.appendChild(td1);
}
table1.appendChild(tr1);
}
}
/*System Time Synchronization*/
function syncTime(){
setInterval(function timeChange(){
var nowDate=new Date();
if(nowDate.getDate()!=static_day){
setStart();
}
},1000);
}
Writing Java is used to, and the code structure of writing js is similar to that of java. Why add a timer in the end? In order to synchronize with the system time. The setStart() method is executed when the inconsistency between the number of days in nowDate and static_day is detected. Refresh the date of the day.
Next comes less code, which makes it easier for me to use less than css. Because CSS is too cumbersome. You can subtract a lot of code with less. Comparing programmers, the fewer code the program has.
//Set width
@width: 100%;
@height:100%;
//Set all border properties
.all_border(@width:0.5px,@style:solid,@color:#ccc) {
border: @arguments;
}
// Set all centering attributes
.all_center(@w) {
width: @w;
margin: 7% auto;
}
#container {
.all_center(100%);
}
#parent {
.all_center(50%);
.all_border();
}
#header {
width: @width;
display: flex;
justify-content: space-between;
.all_border(0.7px);
}
//Setting the btn property
.btn1 {
.all_border();
color: #ffffff;
border-radius: 50%;
&:hover {
background-color: #3c3c3c;
}
}
#center {
width: @width;
height: @height;
}
#footer {
width: @width;
height: @height;
}
//Setting table properties
table {
width: 100%;
height: @height;
td {
width: 100%/7;
height: 100%/7;
text-align: center;
}
}
td {
background-color: #1b6d85;
color: white;
}
.day_td_class:hover {
background-color: #66ccff;
transform: scale(1.2);
}Then paste the compiled css on
body {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.all_center {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#parent {
border: 0.5px solid #cccccc;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#header {
width: 100%;
display: flex;
justify-content: space-between;
border: 0.7px solid #cccccc;
}
.btn1 {
border: 0.5px solid #cccccc;
color: #ffffff;
border-radius: 50%;
}
.btn1:hover {
background-color: #3c3c3c;
}
#center {
width: 100%;
}
#footer {
width: 100%;
}
table {
width: 100%;
}
table td {
width: 14.28571429%;
text-align: center;
}
td {
background-color: #1b6d85;
color: white;
}
.day_td_class:hover {
background-color: #66ccff;
transform: scale(1.2);
}
Actually, it's not too complicated to implement. After all, the js code base gives us a good date. We just need to calculate the date and fill in the corresponding form.