JS implements simple calendar effect

* {
  margin: 0;
  padding: 0;
  list-style: none;
 }

 #box {
  width: 280px;
  height: 360px;
  margin: 50px auto;
  background-color: black;
  color: aliceblue;
  line-height: 40px;
 }

 #header {
  height: 40px;
  color: aliceblue;
  line-height: 40px;
 }

 #header span {
  float: left;
  text-align: center;
  margin-top: 10px;
  line-height: 40px;
 }

 #prev,
 #next {
  width: 20%;
  line-height: 40px;
  cursor: pointer;
 }

 #current {
  width: 60%;
  line-height: 40px;
 }

 #week li {
  width: 40px;
  text-align: center;
  float: left;
  line-height: 40px;
 }

 #content li {
  width: 40px;
  text-align: center;
  float: left;
  line-height: 40px;
}

<div id="box">
 <div id="header">
  <span id="prev">Prev</span>
  <span id="current"></span>
  <span id="next">Next</span>
 </div>
 <ul id="week">
  <li>Day</li>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
 </ul>
 <ul id="content">
  <!-- <li>31</li>
    <li>1</li>
    <li>2</li> -->
 </ul>
</div>```

var current = document.querySelector('#current');//month name
 var prev = document.querySelector('#prev'); // last month var next = document.querySelector('#next'); // next month var content = document.querySelector('#content'); // date content // the number of days to display in the previous month // find out which day of the week the first day of this month is // find out the maximum number of days in the previous month and set the date to 0
 function getPrevDays(date) {
  var date = new Date(date);
  // Set the date to the first day, in order to get the day of the week date.setDate(1);
  var week = date.getDay();
  // Set the date to 0 to get the last day of the previous month date.setDate(0);
  var maxDay = date.getDate();
  var list = [];
  // Traverse the range of red dates and push them into the array for (var i = maxDay - week + 1; i <= maxDay; i++) {
  list.push(i);
  }
  return list;
 }


 // Find the number of days in this month // Push the month to the next month // Set the date to 0
 function getNowDays(date) {
  var date = new Date(date);
  date.setMonth(date.getMonth() + 1);
  date.setDate(0);
  var maxDay = date.getDate();
  // console.log(maxDay)
  var list = [];
  // 
  for (var i = 1; i <= maxDay; i++) {
  list.push(i)
  }
  return list;
 }



 // The number of days to display in the next month function getNextDays(prevDays, nowDays) {
  var list = [];
  // One page calendar 42 days, 42 - last month's days - this month's days = finally display the remaining days of next month for (var i = 1; i <= 42 - prevDays - nowDays; i++) {
  list.push(i)
  }
  return list
 }

 var x = 1;
 // Encapsulate the output date content // x records the clicked month and automatically obtains the time to be displayed in that month according to the array above the month function output(x) {
  arr1 = getPrevDays('2021-' + x);
  arr2 = getNowDays('2021-' + x);
  arr3 = getNextDays(arr1.length, arr2.length);
  // console.log(arr2);
  var res = '';
  for (var i = 0; i < arr1.length; i++) {
  res += '<li style="color:red;">';
  res += arr1[i];
  res += '</li>';
  }

  for (var i = 0; i < arr2.length; i++) {
  res += '<li>';
  res += arr2[i];
  res += '</li>';
  }

  for (var i = 0; i < arr3.length; i++) {
  res += '<li style="color:red;">';
  res += arr3[i];
  res += '</li>';
  }
  // Concatenate the output results of the three arrays and output return content.innerHTML = res;
 }




 // Output month display var date = new Date();
 current.innerHTML = showMonth(new Date());
 // Month function showMonth(date) {
  var date = new Date(date);
  date.setMonth(date.getMonth());
  var mon = date.getMonth();
  // var year = date.getFullyear();
  return (mon + 1) + 'Month';
 }

 output(x);
 // Next month next.onclick = function () {
  x++;
  // console.log(x);
  if (x > 12) {
  x = 1;
  output(x);
  } else {
  current.innerHTML = showMonth('2021-' + x);
  output(x);
  }
 }

 // Last month prev.onclick = function () {
  x--;
  console.log(x);
  if (x < 1) {
  x = 12;
  current.innerHTML = showMonth('2021-' + x);
  output(x);
  } else {
  current.innerHTML = showMonth('2021-' + x);
  output(x);
  }
 }