<div class="mainContainer" id="mainContainer">
  <div class="calHeader dF">
    <span class="flexOne p20 cP prevMonth" id="prevMonth">Prev</span>
    <span class="dF flexOne justifyCenter p20" >
      <span id="currMonth">January</span>
      <span>&nbsp;-&nbsp;</span>
      <span id="currYear">2021</span>
    </span>
    <span class="dF flexOne justifyRight p20 cP nextMonth" id="nextMonth">Next</span>
  </div>
  <div class="calBody">
    <div class="calBodyHeader dF">
      <span>S</span>
      <span>M</span>
      <span>T</span>
      <span>W</span>
      <span>T</span>
      <span>F</span>
      <span>S</span>
    </div>
    <div class="calBodyWeeks" id="calBodyWeeks">

    </div>
  </div>
</div>

body{background: #ffe683; font-family: roboto;}
.mainContainer{width: 350px; height: 377px; background: #fff; margin: 30px auto;
  box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3);
  border-radius: 10px; transition: 0.3s all ease;}
.calBody{padding: 10px 20px;}
.calBodyWeeks{overflow: hidden; padding: 16px 0px;}
.calBodyHeader > span{min-width: 45px; display: flex; flex: 1; justify-content: center;font-weight: 400;;}
.calBodyEachWeek > span{min-width: 45px; display: flex; flex: 1; justify-content: center; padding: 15px 0px; cursor: pointer; opacity: 1; transition: 0.3s opacity 0.2s ease;}
.calBodyEachWeek > span.hideDate{opacity: 0;}
.calBodyEachWeek{transition: 0.3s transform ease;}
.eachWeek_1{transition-delay: 0.1s;}
.eachWeek_2{transition-delay: 0.13s;}
.eachWeek_3{transition-delay: 0.16s;}
.eachWeek_4{transition-delay: 0.19s;}
.eachWeek_5{transition-delay: 0.22s;}
.eachWeek_6{transition-delay: 0.25s;}
.prevMonth{background-image: url(next-icon.svg); width: 15px; height: 15px; background-size: 15px; background-repeat: no-repeat; background-position: 70px 50%;}
.nextMonth{background-image: url(next-icon.svg); width: 15px; height: 15px; background-size: 15px; background-repeat: no-repeat; background-position: 73px 50%;}





.dF{display: flex;}
.flexOne{flex: 1;}
.alignCenter{align-items: center;}
.justifyLeft{justify-content: flex-start;}
.justifyCenter{justify-content: center;}
.justifyRight{justify-content: flex-end;}
.mT10{margin-top: 10px;}
.mT20{margin-top: 20px;}
.p20{padding: 20px;}
.cP{cursor: pointer;}

var monthList = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN","JUL","AUG","SEP","OCT","NOV","DEC"];
var dayList = ["S", "M", "T", "W", "T", "F", "S"];

var prevClickTimer;
$("#prevMonth").on("click", function(){
  curMonthIndex = (curMonthIndex - 1);
  if(curMonthIndex<0){
    curMonthIndex = 11;
    curYear = curYear-1;
  }
  clearTimeout(prevClickTimer);
  prevClickTimer = setTimeout(function(){
    var dayDate = new Date(curYear, curMonthIndex, 1);
    updateDate(dayDate)
  }, 200)
})

var nextClickTimer;
$("#nextMonth").on("click", function(){
  curMonthIndex = (curMonthIndex + 1);
  if(curMonthIndex>11){
    curMonthIndex = 0;
    curYear = curYear+1;
  }
  clearTimeout(nextClickTimer);
  nextClickTimer = setTimeout(function(){
    var dayDate = new Date(curYear, curMonthIndex, 1);
    updateDate(dayDate)
  }, 200)
})

var curMonthIndex, curDate, curYear;
var maxWeeks = 6;
function updateDate(dayDate){
  curMonthIndex = dayDate.getMonth();
  var curMonth = monthList[curMonthIndex];
  curDate = dayDate.getDate();
  var curDayIndex = dayDate.getDay()+1;
  var curDay = dayList[dayDate.getDay()];
  curYear = 1900 + dayDate.getYear();

  var monthStartDate = new Date(curYear, curMonthIndex, 1);
  var monthStartDayIndex = monthStartDate.getDay();
  var monthStartDay = dayList[monthStartDate.getDay()];

  var daysCount = new Date(curYear, curMonthIndex+1, 0).getDate();
  console.log(daysCount)

  $("#currMonth").text(curMonth);
  $("#currYear").text(curYear);

  var translateWeek = 45*monthStartDayIndex;
  $("#eachWeek_1").css({"transform":"translateX("+translateWeek+"px)"})

  var weekStartDate = 7-monthStartDayIndex;
  var translateWeek = 45*weekStartDate;
  $("#eachWeek_2").css({"transform":"translateX(-"+translateWeek+"px)"})

  var containerHeight;
  for(var i=3; i<=maxWeeks; i++){
    weekStartDate = 7+weekStartDate;
    weekEndDate = 6+weekStartDate;

    var translateWeek = 45*weekStartDate;
    $("#eachWeek_"+i).css({"transform":"translateX(-"+translateWeek+"px)"})

    if(weekStartDate >= daysCount || i === maxWeeks){
      var weekIndex = i-1;
      weekStartDate = weekStartDate-7;
      for(var j=weekStartDate; j<31; j++){
        var dayIndex = j+1;
        if(dayIndex > daysCount){
          $("#eachWeek_"+weekIndex).find(".eachDay_"+dayIndex).addClass("hideDate");
        }else{
          $("#eachWeek_"+weekIndex).find(".eachDay_"+dayIndex).removeClass("hideDate");
        }
      }
    }
  }
}

function init(){
  var calBodyWeeks = $("#calBodyWeeks");
  for(var i=0; i<maxWeeks; i++){
    var weekIndex = i+1;
    var eachWeek = $("<div>").attr({"class": "calBodyEachWeek dF eachWeek_"+weekIndex, "id":"eachWeek_"+weekIndex});
    for(var j=0; j<31; j++){
      var dayIndex = j+1;
      var eachDay = $("<span>").attr({"class": "eachDay eachDay_"+dayIndex}).text(j+1);
      eachWeek.append(eachDay);
    }
    calBodyWeeks.append(eachWeek);
  }
  var dayDate = new Date();
  updateDate(dayDate);
}

$("document").ready(function(){
  init();
})