JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
			<div class="card">
				
				<div class="form-inline">
					  <button class="btn btn-outline-primary col-sm-6" id="previous" onclick="previous()">&#9668;</button>
					  <span class="card-header" id="monthAndYear"></span>
					  <button class="btn btn-outline-primary col-sm-6" id="next" onclick="next()">&#9658;</button>
					</div>
				
				<table class="table table-bordered table-responsive-sm" id="calendar">
				
					<tbody id="calendar-body">
						
					</tbody>
				</table>

				
			</div>	  
		</div>

CSS

body{font-family: 'Roboto', sans-serif;}
.calendar-header{
	padding-top:55px;
	padding-bottom:20px;
	background-color:#f4f4f4;
	-webkit-box-shadow: 0px 4px 5px 0px rgba(207,207,207,1);
	-moz-box-shadow: 0px 4px 5px 0px rgba(207,207,207,1);
	box-shadow: 0px 4px 5px 0px rgba(207,207,207,1);
}
.calendar-header .container{
	display:flex;
	justify-content: space-between;
}
.btn-calendar{
	outline:none;
	border:none;
	border-radius:3px;
	padding:8px 10px;
	background-color:#0271c7;
	color:#fff;
	-webkit-box-shadow: 0px 2px 5px 0px rgba(207,207,207,1);
	-moz-box-shadow: 0px 2px 5px 0px rgba(207,207,207,1);
	box-shadow: 0px 2px 5px 0px rgba(207,207,207,1);
	cursor:pointer;
}
.container{
	width:900px;
	margin:0 auto;
}
.search-wrap{
	color:#d2d2d2;
}
.search{
	border:1px solid #d2d2d2;
	border-radius:3px;
	width:200px;
	margin-left:10px;
	padding:8px 10px;
	color:#d2d2d2;
}
.form-inline{margin:15px 0;}
.btn{
	border:1px solid #ebebeb;
	border-radius:3px;
	display:inline-block;
	width:17px;
	height:17px;
	padding:0;
	margin-bottom: 5px;
	color:#676767;
	font-size:10px;
	background-color:transparent;
	text-align:center;
	cursor:pointer;
}
.card-header{
	margin:0 5px;
	font-size:15px;
}
.table{
	border:1px solid #e2e2e2;
}
.table th{
	border:1px solid #e2e2e2;
	width:50px;
	height:50px;
	padding:10px;
	color:#999999;
	font-size:11px;
	box-sizing:border-box;
	cursor:pointer;
}
.table th:hover{
	background-color:#e5f1f9;
}
.today{
	background-color:#f4f4f4;
	font-weight:bold;
}
.note{
	background-color:#c2e4fe;
}

JavaScript

let today = new Date();
let currentMonth = today.getMonth();
let currentYear = today.getFullYear();
let selectYear = document.getElementById("year");
let selectMonth = document.getElementById("month");

let months = ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"];

let monthAndYear = document.getElementById("monthAndYear");
showCalendar(currentMonth, currentYear);


function next(){
  currentYear = (currentMonth === 11) ? currentYear + 1 : currentYear;
  currentMonth = (currentMonth + 1) % 12;
  showCalendar(currentMonth, currentYear);
}

function previous(){
  currentYear = (currentMonth === 0) ? currentYear - 1 : currentYear;
  currentMonth = (currentMonth === 0) ? 11 : currentMonth - 1;
  showCalendar(currentMonth, currentYear);
}

function showCalendar(month, year) {

  //Берем текущую дату
  const currDay = new Date(year, month);

  //Находим дату начала недели
  currDay.setDate(currDay.getDate() - currDay.getDay() + 1);

  //Делаем заголовок дней недели
  const tbl = document.getElementById("calendar-body"); 
  var weekDays = ['Понедельник, ', 'Вторник, ', 'Среда, ', 'Четверг, ', 'Пятница, ', 'Суббота, ', 'Воскресенье, '  ];

  // filing data about month and in the page via DOM.
  monthAndYear.innerHTML = months[month] + " " + year;

  tbl.innerHTML = '';

  //Пока понедельник не выходит за пределы текущего месяца
  // добавляем строки
  do {
    const row = document.createElement("tr");
    for(let i = 0; i < 7; i++) {
      const classes =
        currDay.getDate() === today.getDate() &&
        currDay.getFullYear() === today.getFullYear() &&
        currDay.getMonth() === today.getMonth()
         ? ' class="today"' : '';

      row.innerHTML += `<th${classes}>${weekDays.shift() || ''} ${currDay.getDate()}</th>`;
      //Увеличиваем дату на единицу
      currDay.setDate(currDay.getDate() + 1);
    }
    tbl.appendChild(row);
  } while (currDay.getMonth() === month);
}