JSFiddle - React, Tailwind, and code Playground
CSS
<style>
#calendar4 {
width: 100%;
font: monospace;
line-height: 1.2em;
font-size: 15px;
text-align: center;
}
#calendar4 thead tr:last-child {
font-size: small;
font-weight: 700;
color: rgb(103, 103, 103);
}
#calendar4 tbody td {
color: rgb(44, 86, 122);
}
#calendar4 tbody td:nth-child(1) {
font-size: small;
color: rgba(103, 103, 103, .7);
}
#calendar4 tbody td:nth-child(n+7), #calendar4 .holiday {
color: rgb(231, 140, 92);
}
#calendar4 tbody td.today {
outline: 3px solid red;
}
</style>
<table id="calendar4">
<thead>
<tr><td><td colspan="4"><select>
<option value="0">Январь</option>
<option value="1">Февраль</option>
<option value="2">Март</option>
<option value="3">Апрель</option>
<option value="4">Май</option>
<option value="5">Июнь</option>
<option value="6">Июль</option>
<option value="7">Август</option>
<option value="8">Сентябрь</option>
<option value="9">Октябрь</option>
<option value="10">Ноябрь</option>
<option value="11">Декабрь</option>
</select><td colspan="3"><input type="number" value="" min="0" max="9999" size="4">
<tr><td><td>Пн<td>Вт<td>Ср<td>Чт<td>Пт<td>Сб<td>Вс
<tbody>
</table>
<script>
function Calendar4(id, year, month) {
Date.prototype.getWeek = function () {
var target = new Date(this.valueOf());
var dayNr = (this.getDay() + 6) % 7;
target.setDate(target.getDate() - dayNr + 3);
var firstThursday = target.valueOf();
target.setMonth(0, 1);
if (target.getDay() != 4) {
target.setMonth(0, 1 + ((4 - target.getDay()) + 7) % 7);
}
return 1 + Math.ceil((firstThursday - target) / 604800000);
}
var Dlast = new Date(year,parseFloat(month)+1,0).getDate(),
D = new Date(year,month,Dlast),
DNlast = D.getDay(),
DNfirst = new Date(D.getFullYear(),D.getMonth(),1).getDay(),
m = document.querySelector('#'+id+' option[value="' + D.getMonth() + '"]'),
g = document.querySelector('#'+id+' input');
if (new Date(D.getFullYear(),D.getMonth(),1).getWeek() < 10) {
...