シンプルなカレンダー効果を実現する js

## css モジュール <style type="text/css">
  *{
   マージン: 0;
   パディング: 0;
  }
  。日付{
   幅: 300ピクセル;
   高さ: 220px;
   境界線: 1px実線 #000;
   マージン: 100px 自動;
  }
  。タイトル{
   幅: 200ピクセル;
   ディスプレイ: フレックス;
   フォントサイズ: 12px;
   マージン: 自動;
   テキスト配置: 中央;
   コンテンツの両端揃え: スペースを空ける;
   アイテムの位置を中央揃えにします。
  }
  。年{
   マージン: 0 40px;
   ディスプレイ: フレックス;
   flex-direction: 列;
  }
  ＃週{
   上境界線: 1px 実線 #000;
   下境界線: 1px 実線 #000;
   マージン: 自動;
   リストスタイルタイプ: なし;
   ディスプレイ: フレックス;
  }
  #週 li{
   表示: インラインブロック;
   テキスト配置: 中央;
   フレックス：1;
  }
  #ul{
   リストスタイルタイプ: なし;
   上マージン: 5px;
  }
  #ul li {
   表示: インラインブロック;
   幅: 40px;
   高さ: 21px;
   テキスト配置: 中央;
   境界線: 1px 実線 #fff;
  }
  。現在{
   色：赤;
  }
  #ul li:hover{
   境界線: 1px 実線の赤;
  }
  #前へ、#次へ{
   カーソル: ポインタ;
  }
 </スタイル>

##html
<div class="date">
  <div class="title">
   <span id="prev">&lt;前月</span>
   <div class="年">
    <span id="year">2021</span>
    <span id="month">5月</span>
   </div>
   <span id="next">来月&gt;</span>
  </div>
  <!-- ul を使用してカレンダーを作成します -->
  <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="ul">
   
  </ul>
</div>

## js コード <script type="text/javascript">
  // 日付オブジェクト。月を切り替えるのに便利なので、グローバルとして設定します。let date = new Date();
  // クリックすると月イベントが切り替わります document.getElementById('prev').addEventListener('click',function(){
   date.setMonth(date.getMonth()-1);
   追加（）;
  })
  document.getElementById('next').addEventListener('click',function(){
   date.setMonth(date.getMonth()+1);
   追加（）;
  })
  追加（）;
  
  //カレンダーを作成する関数 function add(){
   // 現在の年 let cYear = date.getFullYear();
   // 現在の月 let cMonth = date.getMonth()+1;
   // 現在の日付を取得します。let cDay = date.getDate();
   
   // 年と月を書き込みます document.getElementById('year').innerHTML = cYear;
   document.getElementById('month').innerHTML = cMonth+'月';
   
   
   days = new Date(cYear,cMonth,-1) とします。
   // 現在の月の日数 let n = days.getDate()+1;
   // 各月の最初の日は週の何曜日ですか? let week = new Date(cYear,cMonth-1,1).getDay();
   html = '' とします。
   //domに書き込む
   for(let i=0;i<week;i++){
    html+=`<li></li>`
   }
   for(let i=1;i<=n;i++){
    if(i==cDay){
     html+=`<li class="current">${i}</li>`
    }それ以外{
     html+=`<li>${i}</li>`
    }
   }
   // 一度挿入 document.getElementById('ul').innerHTML = html
  }
</スクリプト>