JS はシンプルなカレンダー効果を実装します

* {
  マージン: 0;
  パディング: 0;
  リストスタイル: なし;
 }

 ＃箱 {
  幅: 280ピクセル;
  高さ: 360ピクセル;
  マージン: 50px 自動;
  背景色: 黒;
  色: アリスブルー;
  行の高さ: 40px;
 }

 #ヘッダー{
  高さ: 40px;
  色: アリスブルー;
  行の高さ: 40px;
 }

 #ヘッダースパン{
  フロート: 左;
  テキスト配置: 中央;
  上マージン: 10px;
  行の高さ: 40px;
 }

 #前へ,
 ＃次 {
  幅: 20%;
  行の高さ: 40px;
  カーソル: ポインタ;
 }

 ＃現在 {
  幅: 60%;
  行の高さ: 40px;
 }

 #週 li {
  幅: 40px;
  テキスト配置: 中央;
  フロート: 左;
  行の高さ: 40px;
 }

 #コンテンツ li {
  幅: 40px;
  テキスト配置: 中央;
  フロート: 左;
  行の高さ: 40px;
}

<div id="ボックス">
 <div id="ヘッダー">
  <span id="prev">前へ</span>
  <span id="現在"></span>
  <span id="next">次へ</span>
 </div>
 <ul id="週">
  <li>日</li>
  <li>1つ</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
 </ul>
 <ul id="コンテンツ">
  <!-- <li>31</li>
    <li>1</li>
    <li>2</li> -->
 </ul>
</div>```

var current = document.querySelector('#current');//月名
 var prev = document.querySelector('#prev'); // 先月 var next = document.querySelector('#next'); // 翌月 var content = document.querySelector('#content'); // 日付コンテンツ // 前月に表示する日数 // 今月の初日が何曜日かを調べる // 前月の最大日数を調べ、日付を 0 に設定する
 関数 getPrevDays(日付) {
  var date = new Date(date);
  // 曜日を取得するために、日付を最初の日に設定します date.setDate(1);
  var week = date.getDay();
  // 前月の最終日を取得するには日付を 0 に設定します date.setDate(0);
  var maxDay = date.getDate();
  var リスト = [];
  // 赤い日付の範囲を走査し、配列にプッシュします for (var i = maxDay - week + 1; i <= maxDay; i++) {
  リストをプッシュします。
  }
  リストを返します。
 }


 // 今月の日数を調べる // 月を次の月に繰り上げる // 日付を 0 に設定する
 関数 getNowDays(日付) {
  var date = new Date(date);
  date.setMonth(date.getMonth() + 1);
  日付を設定します。
  var maxDay = date.getDate();
  // コンソール.log(最大日数)
  var リスト = [];
  // 
  (var i = 1; i <= maxDay; i++) の場合 {
  リスト.push(i)
  }
  リストを返します。
 }



 // 次の月に表示する日数 function getNextDays(prevDays, nowDays) {
  var リスト = [];
  // 1ページのカレンダー42日、42 - 先月の日数 - 今月の日数 = 最後に来月の残りの日数を表示します for (var i = 1; i <= 42 - prevDays - nowDays; i++) {
  リスト.push(i)
  }
  返品リスト
 }

 var x = 1;
 // 出力日付の内容をカプセル化します // x はクリックされた月を記録し、その月の上の配列に従ってその月に表示される時刻を自動的に取得します function output(x) {
  arr1 = getPrevDays('2021-' + x);
  arr2 = getNowDays('2021-' + x);
  arr3 = getNextDays(arr1.length, arr2.length);
  // コンソールログ(arr2);
  var res = '';
  (var i = 0; i < arr1.length; i++) の場合 {
  res += '<li style="color:red;">';
  res += arr1[i];
  res += '</li>';
  }

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

  (var i = 0; i < arr3.length; i++) の場合 {
  res += '<li style="color:red;">';
  res += arr3[i];
  res += '</li>';
  }
  // 3 つの配列の出力結果を連結して出力​​します。 return content.innerHTML = res;
 }




 // 月の表示を出力します var date = new Date();
 current.innerHTML = showMonth(新しい日付());
 // 月関数 showMonth(date) {
  var date = new Date(date);
  date.setMonth(date.getMonth());
  var mon = date.getMonth();
  // var year = date.getFullyear();
  (mon + 1) + '月'を返します。
 }

 出力(x);
 // 来月 next.onclick = function () {
  ++;
  // コンソールログ(x);
  (x > 12) の場合 {
  x = 1;
  出力(x);
  } それ以外 {
  current.innerHTML = showMonth('2021-' + x);
  出力(x);
  }
 }

 // 先月 prev.onclick = function () {
  x--;
  コンソールログ(x);
  (x < 1) の場合 {
  x = 12;
  current.innerHTML = showMonth('2021-' + x);
  出力(x);
  } それ以外 {
  current.innerHTML = showMonth('2021-' + x);
  出力(x);
  }
 }