JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div class="month"></div>

CSS

.month, .month.vert .week, .day { display:inline-block; }
.month.vert .day { display:block; }
.day { border: 1px solid #ccc; width: 30px; line-height: 30px; text-align: center; margin: 1px; }

JavaScript

var calendar = {
	update: function (year, month) {
		this.days.length = 7;
		var stepDay = new Date(year, month, 1);
		stepDay.setDate(1 - stepDay.getDay());
		var lastDay = new Date(year, month + 1, 0);
		lastDay.setDate(lastDay.getDate() + 6 - lastDay.getDay());
		while (stepDay <= lastDay) {
			this.days.push(stepDay.getDate());
			stepDay.setHours(24);
		}
	},
	render: function () {
		var html = '';
		for (var i = 0, j = 0; i < this.days.length; j = ++i % 7) {
			if (j == 0) html += '<div class="week">';
			html += '<div class="day">' + this.days[i] + '</div>';
			if (j == 6) html += '</div>';
		}
		this.element.innerHTML = html;
	},
	toggle: function () {
		this.element.classList.toggle('vert');
	}
};
var today = new Date, thisYear = today.getFullYear(), thisMonth = today.getMonth();
calendar.days = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];

calendar.element = document.querySelector('.month');
calendar.element.addEventListener('click', function () { calendar.toggle() });
calendar.update(thisYear, thisMonth);
calendar.render();