JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<script type="text/javascript">
var C=new Date();
C.month=["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"];
// Количество дней в месяце(28/29, 30, 31)
C.getDaysInMonth = function ()
{
var here = new Date(this.getTime());
here.setDate(32);
return 32 - here.getDate();
};
// День недели первого дня месяца (0-вс,1-пн и т.д.)
C.getFirstDay = function ()
{
var here = new Date(this.getTime());
here.setDate(1);
return here.getDay();
};
// Инициализация календаря
//вывод на экран календаря по текущему месяцу
// добавление элементов для изменения месяца и года календаря
C.init = function(){
str='<select id="month" onchange="C.changeCalendMonth(this.selectedIndex);">';
for (var i=0; i<12;i++){
if(C.getMonth()==i)
str+="<option selected>"+C.month[i]+"</option>";
else
str+="<option>"+C.month[i]+"</option>";
}
str+="</select>";
str+='<select id="year" onchange="C.changeCalendYear(this.value);">';
for (var i=2000; i<2050;i++){
if(C.getFullYear()==i)
str+="<option selected>"+i+"</option>";
else
str+="<option>"+i+"</option>";
}
str+="</select>";
str+="<div id='calendMonth'></div>";
document.getElementById("calend").innerHTML=str;
this.showCalendar();
}
// Изменение месяца календаря
C.changeCalendMonth = function(month) {
if(month!==undefined){
this.setMonth(month)
this.showCalendar();
}
}
// Изменение года календаря
C.changeCalendYear = function(year) {
if(year!==undefined){
this.setYear(year)
this.showCalendar();
}
}
// Непосредственно функция по отрисовке месячного календаря
// показывает календарь для даты установленной для объекта С
C.showCalendar = function() {
var firstDay =this.getFirstDay()==0?6:this.getFirstDay()-1;
var str = "<table border=1><tr><th>Пн</th><th>Вт</th><th>Ср</th><th>Чт</th><th>Пт</th><th>Сб</th><th>Вс</th></tr>";
for (var i=0;i<this.getDaysInMonth()+firstDay;i++) {
if (i%7==0)
...