Calendar assignment

calendar.js

class Calendar {
  constructor(ctx = "", cb) {
    this.d = document;
    this.ctx = this.d.querySelector(`${ctx}.calendar`);

    console.log(
      "\u0040\u0041\u0055\u0054\u0048\u004F\u0052\u003D\u0049\u0041\u004E\u0046\u0041\u0042\u0053"
    );
    this.daysOfTheWeek = [
      "Sunday",
      "Monday",
      "Tuesday",
      "Wednesday",
      "Thursday",
      "Friday",
      "Saturday"
    ];
    this.date = new Date();
    this.mth = this.date.getMonth();
    this.yr = this.date.getFullYear();
    this.firstDayOfMonth = this.mth + "/1/" + this.yr;
    this.date = new Date(this.firstDayOfMonth);
    this.numberOfDaysInMonth = this.daysInMonth(this.date);
    this.firstDayOfWeek = this.date.getDay();
    this.cb = cb;
    this.renderCalendar();
    this.$days = this.d.querySelectorAll(".current:not(.head)");
    this.cb(this);
  }
  daysInMonth(anyDateInMonth) {
    return new Date(
      anyDateInMonth.getYear(),
      anyDateInMonth.getMonth() + 1,
      0
    ).getDate();
  }
  createHeader() {
    for (let i = 0; i < 7; i++) {
      let dayHead = this.d.createElement("div");
      dayHead.classList.add("day");
      dayHead.classList.add("head");
      dayHead.appendChild(this.d.createTextNode(this.daysOfTheWeek[i]));
      this.ctx.appendChild(dayHead);
    }
  }
  createDays(n) {
    for (let i = -this.firstDayOfWeek; i <= n; i++) {
      let day = this.d.createElement("div");
      day.classList.add("day");
      let daySpan = this.d.createElement("div");
      if (i > 0) {
        daySpan.appendChild(this.d.createTextNode(i));
        day.appendChild(daySpan);
        day.classList.add("current");
      } else {
        daySpan.appendChild(this.d.createTextNode("\n"));
      }
      day.appendChild(daySpan);
      this.ctx.appendChild(day);
    }
  }
  dayAvailable(d, avail = null) {
    let day = this.ctx.querySelectorAll(".day.current")[d - 1];
    /*
        //Old Version
        if (avail == null) {
            day.classList.remove("on");
            day.classList.remove("off");
        } else {
            if(day.classList.contains("on") && !day.classList.contains("off")) 
            {day.classList.toggle("on");day.classList.toggle("off");}
            else if(day.classList.contains("off") && !day.classList.contains("on")) 
            {day.classList.toggle("off");day.classList.toggle("on")}
            else if(!day.classList.contains("off") && !day.classList.contains("on")) 
            {day.classList.toggle("on");}
        }
        */
    if (avail != null) {
      if (avail) {
        day.classList.remove("off");
        day.classList.add("on");
      } else if (!avail) {
        day.classList.remove("on");
        day.classList.add("off");
      }
    } else {
      if (!day.classList.contains("on") && !day.classList.contains("off")) {
        day.classList.remove("off");
        day.classList.add("on");
      } else if (day.classList.contains("on")) {
        day.classList.remove("on");
        day.classList.add("off");
      } else if (day.classList.contains("off")) {
        day.classList.remove("off");
      }
    }
  }
  clearContext() {
    while (this.ctx.firstChild) {
      this.ctx.removeChild(this.ctx.firstChild);
    }
  }
  renderCalendar() {
    this.clearContext();
    this.createHeader();
    this.createDays(this.numberOfDaysInMonth);
  }
  reRenderCalendar(month, year) {
    this.mth = month;
    this.yr = year;
    this.firstDayOfMonth = this.mth + "/1/" + this.yr;
    this.date = new Date(this.firstDayOfMonth);
    this.numberOfDaysInMonth = this.daysInMonth(this.date);
    this.firstDayOfWeek = this.date.getDay();
    this.renderCalendar();
    this.cb(this);
  }
}
let calendar = new Calendar("#calendar", c => {
  c.d.querySelectorAll(".day:not(.head)").forEach(elem => {
    elem.onclick = e => {
      console.log(e.path[0].firstChild.innerHTML);
      c.dayAvailable(e.path[0].firstChild.innerHTML);
    };
  });
  c.d.querySelector("#allAvailable").onclick = e => {
    c.$days.forEach(el => {
      c.dayAvailable(el.firstChild.innerHTML, true);
    });
  };
  c.d.querySelector("#allUnavailable").onclick = e => {
    c.$days.forEach(el => {
      var d = el.firstChild.innerHTML;
      c.dayAvailable(d, false);
    });
  };
});

document.querySelector("#month").addEventListener("change", e => {
  calendar.reRenderCalendar(
    e.target.value,
    document.querySelector("#year").value
  );
});
document.querySelector("#year").addEventListener("change", e => {
  calendar.reRenderCalendar(
    document.querySelector("#month").value,
    e.target.value
  );
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
    <script src="./calendar.js" defer></script>
</head>
<body>
    <div class="container">
        <h1>Availability Calendar</h1>
        <label>Month:</label>
        <select id="month">
            <option value="1">January</option>
            <option value="2">February</option>
            <option value="3">March</option>
            <option value="4">April</option>
            <option value="5">May</option>
            <option value="6">June</option>
            <option value="7">July</option>
            <option value="8">August</option>
            <option value="9">September</option>
            <option value="10">October</option>
            <option value="11">November</option>
            <option value="12">December</option>
        </select>

        <label>Year:</label>
        <select id="year" style="margin-bottom: 10px;">
            <option value="2016">2016</option>
            <option value="2017">2017</option>
            <option value="2018">2018</option>
        </select>
        <br />
        <sup>*click to toggle between available and not available, *doubleclick to un-specify</sup>
    </div>

    <div id="calendar" class="calendar">
    </div>

    <div class="buttons">
        <button id="allAvailable">All Available</button>
        <button id="allUnavailable">All Unavailable</button>
    </div>
</body>
</html>

main.css

.calendar{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    box-shadow: 0 0 10px 5px #000;
    margin: 5vh 1vw;
    width: 95vw;
    justify-content: flex-start;
    align-content: center;
    justify-items: center;
}
.calendar > .day{
    border: 1px solid #000;
    padding: 5vh 5vw;
    width: 3%;
    justify-content: center;
    align-content: center;
    align-items: center;
    text-align: center;
    margin-right: 0.5vw;
    user-select: none;
}
.day:not(.current){
    background-color: rgb(202, 202, 202);
}
.day.head{
    height: 1vh;
    padding-top: 1vh;
    padding-bottom:2vh;
    padding-left: 4vw;
    padding-right: 6vw;
    margin-bottom: 0.75vh;
    justify-content: center;

    width: 3%;
    text-align: center;
}
.day:not(.head) div{
    font-size: 0.9em;
    -ms-transform: translate(4vw, -4vh); /* IE 9 */
    -webkit-transform: translate(4vw, -4vh); /* Safari */
    transform: translate(4vw, -4vh);
}
.on{
    background: green;
}
.off{
    background: red;
}