<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css" />
  <link href="https://fonts.cdnfonts.com/css/proxima-nova-condensed" rel="stylesheet" />
  <link rel="stylesheet" href="app_calendarv2.css" />
</head>

<body>
  <table id="calendar" class="black"></table>
  <!--white black-->
  <script src="calendarv4.js"></script>
</body>

</html>
* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  font-family: "Proxima Nova Condensed";
  background-color: #ebebeb;
}

.white .prev,
.white .next {
  border-radius: 100%;
  border: 1px solid #d3d3d3;
  color: #7b7d81;
  line-height: 22px;
  width: 22px;
  text-align: center;
}

.white .prev:hover,
.white .next:hover {
  background-color: #efefef;
  color: #070709;
  cursor: pointer;
  border: 1px solid #efefef;
}

table.white {
  background-color: #fff;
  padding: 4px;
  border-collapse: separate;
  border-spacing: 12px;
  margin: 24px;
  border-radius:16px;
}

table.white thead {
  position: relative;
}

table.white thead tr td {
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
}

table.white thead tr.hr {
  border-top: 1px solid #d3d3d3;
  position: absolute;
  width: 100%;
  bottom: 0;
}

table.white tr th,
table.white tr td {
  width: 24px;
  text-align: center;
  line-height: 24px;
}

table.white tr.days th {
  font-size: 12px;
  color: #a6a8ac;
}

table.white tr td {
  font-size: 14px;
  color: #1b1a1d;
}

table.white tr td.today,
table.white tr td.normal:hover {
  background-color: #368afb;
  color: #fff;
  border-radius: 4px;
}

.not-current {
  visibility: hidden;
}

/*black*/
.black .prev,
.black .next {
  border-radius: 100%;
  border: 1px solid #272a30;
  color: #70757d;
  line-height: 22px;
  width: 22px;
  text-align: center;
}

.black .prev:hover,
.black .next:hover {
  background-color: #272a30;
  color: #fff;
  cursor: pointer;
  border: 1px solid #272a30;
}

table.black {
  background-color: #1a1c1e;
  padding: 4px;
  border-collapse: separate;
  border-spacing: 12px;
  margin: 24px;
  border-radius:16px;
}

table.black thead {
  position: relative;
}

table.black thead tr td {
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
}

table.black thead tr.hr {
  border-top: 1px solid #24292a;
  position: absolute;
  width: 100%;
  bottom: 0;
}

table.black tr th,
table.black tr td {
  width: 24px;
  text-align: center;
  line-height: 24px;
}

table.black tr.days th {
  font-size: 12px;
  color: #a6a8ac;
}

table.black tr td {
  font-size: 14px;
  color: #fff;
}

table.black tr td.today,
table.black tr td.normal:hover {
  background-color: #368afb;
  color: #fff;
  border-radius: 4px;
}

.not-current {
  visibility: hidden;
}

const App = (() => {
  const months = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December"
  ];

  const days = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];

  let nowDate = new Date();

  let currDay = nowDate.getDate();
  let currMonth = nowDate.getMonth();
  let currYear = nowDate.getFullYear();

  const calendarThead = (m, y) => {
    return `<thead><tr><td colspan="1" class="prev" id="prev"><i class="uil uil-angle-left"></i></td><td colspan="5">${months[m]} ${y}</td><td colspan="1" class="next" id="next"><i class="uil uil-angle-right"></i></td></tr><tr class="hr"></tr></thead>`;
  };

  const calendarWeekdays = () => {
    return `<tr class="days">
  ${days.map((day) => "<th>" + day + "</th>").join("")}
</tr>`;
  };

  const getDay = (date) => {
    let day = date.getDay();
    if (day == 0) day = 7;
    return day - 1;
  };

  const getDays = (i, d, table) => {
    if (
      new Date().getFullYear() == currYear &&
      new Date().getMonth() == currMonth &&
      i == currDay
    ) {
      table += '<td class="today">' + d.getDate() + "</td>";
    } else {
      table += '<td class="normal">' + d.getDate() + "</td>";
    }

    return table;
  };

  const calendar = (el, dd, m, y) => {
    let table = "";

    let mon = m;
    let d = new Date(y, mon);

    el.innerHTML = calendarThead(m, y);
    el.innerHTML += calendarWeekdays();

    for (let i = 0; i < getDay(d); i++) {
      table += "<td></td>";
    }

    let i = 1;
    while (d.getMonth() == mon) {
      table = getDays(i, d, table);

      if (getDay(d) % 7 == 6) {
        table += "</tr><tr>";
      }

      d.setDate(d.getDate() + 1);
      i++;
    }

    if (getDay(d) != 0) {
      for (let i = getDay(d); i < 7; i++) {
        table += "<td></td>";
      }
    }

    el.innerHTML += table;
  };

  const nextMonth = () => {
    if (currMonth == 11) {
      currMonth = 0;
      currYear = currYear + 1;
    } else {
      currMonth = currMonth + 1;
    }

    createCalendar();
  };

  const prevMonth = () => {
    if (currMonth == 0) {
      currMonth = 11;
      currYear = currYear - 1;
    } else {
      currMonth = currMonth - 1;
    }

    createCalendar();
  };

  const createCalendar = () =>
    calendar(document.getElementById("calendar"), currDay, currMonth, currYear);

  createCalendar();

  document.getElementById("calendar").addEventListener(
    "click",
    (event) => {
      if (event.target.className === "uil uil-angle-right") nextMonth();
      if (event.target.className === "uil uil-angle-left") prevMonth();
    },
    false
  );
})();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.