JSFiddle - React, Tailwind, and code Playground

by anetteberg

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Calendar</title>
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="container">
      <div class="calendar">
        <div class="month">
          <i class="fas fa-angle-left prev"></i>
          <div class="date">
            <h1></h1>
            <p></p>
          </div>
          <i class="fas fa-angle-right next"></i>
        </div>
        <div class="weekdays">
          <div>Sun</div>
          <div>Mon</div>
          <div>Tue</div>
          <div>Wed</div>
          <div>Thu</div>
          <div>Fri</div>
          <div>Sat</div>
        </div>
        <div class="days"></div>
		<div class="days2"></div>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

CSS

* {
	margin: 0;
	padding: 0;
	font-family: "Quicksand", sans-serif;
}

html {
	font-size: 62.5%;
}

.container {
	width: 100%;
	height: 100vh;
	background-color: #12121f;
	color: #eee;
	display: flex;
	justify-content: center;
	align-items: center;
}

.calendar {
	width: 400px;
	height: 600px;
	background-color: #222227;
	box-shadow: 0 0.5rem 3rem rgba(0, 0, 0, 0.4);
}

.month {
	width: 400px;
	height: 40px;
	background-color: #167e56;
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: center;
}

.month i {
	font-size: 18px;
	cursor: pointer;
}

.month h1 {
	font-size: 18px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	margin-bottom: 1px;
}

.month p {
	font-size: 14px;
}

.weekdays {
	width: 100%;
	height: 40px;
	padding: 1px;
	display: flex;
	align-items: center;
}

.weekdays div {
	height: 40px;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.1rem;
	width: calc(400px / 7);
	display: flex;
	justify-content: center;
	align-items: center;
	text-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.5);
}

.days {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	border: 1px solid yellow;
}

.days div {
	font-size: 12px; 
	width: calc(400px / 7);
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.days div:hover:not(.today) {
	background-color: #bdbdbd;
	cursor: pointer;
}
.days2 {
	height: 300px;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	border: 1px solid red;
}

.days2 div {
	font-size: 12px; 
	width: calc(400px / 7);
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.days2 div:hover:not(.today) {
	background-color: #bdbdbd;
	cursor: pointer;
}

.prev-date,
.next-date {
	opacity: 0.5;
}

.today {
	background-color: #167e56;
}

JavaScript

const date = new Date();

const renderCalendar = () => {
  date.setDate(1);

  const monthDays = document.querySelector(".days");

  const lastDay = new Date(
    date.getFullYear(),
    date.getMonth() + 1,
    0
  ).getDate();

  const prevLastDay = new Date(
    date.getFullYear(),
    date.getMonth(),
    0
  ).getDate();

  const firstDayIndex = date.getDay();

  const lastDayIndex = new Date(
    date.getFullYear(),
    date.getMonth() + 1,
    0
  ).getDay();

  const nextDays = 7 - lastDayIndex - 1;

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

  document.querySelector(".date h1").innerHTML = months[date.getMonth()];
  document.querySelector(".date p").innerHTML = new Date().toDateString();

  let days = "";

  for (let x = firstDayIndex; x > 0; x--) {
    days += `<div class="prev-date">${prevLastDay - x + 1}</div>`;
  }

  for (let i = 1; i <= lastDay; i++) {
    if (
      i === new Date().getDate() &&
      date.getMonth() === new Date().getMonth()
    ) {
      days += `<div class="today">${i}</div>`;
    } else {
      days += `<div>${i}</div>`;
    }
  }

  for (let j = 1; j <= nextDays; j++) {
    days += `<div class="next-date">${j}</div>`;
    monthDays.innerHTML = days;
  }
};

document.querySelector(".prev").addEventListener("click", () => {
  date.setMonth(date.getMonth() - 1);
  renderCalendar();
});

document.querySelector(".next").addEventListener("click", () => {
  date.setMonth(date.getMonth() + 1);
  renderCalendar();
});

renderCalendar();