JSFiddle - React, Tailwind, and code Playground
HTML
<div id="calendar"></div>
CSS
.click {
background: red;
}
table {
border-collapse: collapse;
}
td, th {
border: 1px solid black;
padding: 3px;
text-align: center;
}
th {
font-weight: bold;
background-color: #E6E6E6;
}
JavaScript
function createCalendar(id, year, month) {
var your_url = 'send.php';
var date_json;
$.ajax({
type: "POST",
url: your_url,
data: "month="+month + "&year="+year,
success: function(data) {
//date_json = JSON.stringify(date_json);
date_json = JSON.parse(data);
//alert(data);
}
});
var elem = document.getElementById(id);
var mon = month - 1; // месяцы в JS идут от 0 до 11, а не от 1 до 12
var d = new Date(year, mon);
var table = '<table class="calendar"><tr class="calendar-row"><th class="calendar-day-head">пн</th><th class="calendar-day-head">вт</th><th class="calendar-day-head">ср</th><th class="calendar-day-head">чт</th><th class="calendar-day-head">пт</th><th class="calendar-day-head">сб</th><th class="calendar-day-head">вс</th></tr><tr class="calendar-row">';
// заполнить первый ряд от понедельника
// и до дня, с которого начинается месяц
// * * * | 1 2 3 4
for (var i=0; i<getDay(d); i++) {
table += '<td class="calendar-day-np"></td>';
}
// ячейки календаря с датами
while(d.getMonth() == mon) {
//table += '<td class="calendar-day">'+d.getDate()+'</td>';
if (!$.inArray( d.getDate(), date_json ))
{
table += '<td class="calendar-day click">'+d.getDate()+'</td>';
}
else {table += '<td class="calendar-day">'+d.getDate()+'</td>';}
if (getDay(d) % 7 == 6) { // вс, последний день - перевод строки
table += '</tr><tr class="calendar-row">';
}
d.setDate(d.getDate()+1);
}
// добить таблицу пустыми ячейками, если нужно
if (getDay(d) != 0) {
for (var i=getDay(d); i<7; i++) {
table += '<td class="calendar-day-np"></td>';
}
}
// закрыть таблицу
table += '</tr></table>';
// только одно присваивание innerHTML
elem.innerHTML = table;
}
function getDay(date) { // получить номер дня недели, от 0(пн) до 6(вс)
var day = date.getDay();
if (day == 0) day = 7;
return day - 1;
}
//var today = new Date();
//var yr = today.getFullYear();
//var mr =...