Для отрисовки календаря с числами дней, соответствующими дням недели, вам потребуется использовать JavaScript в сочетании с HTML и CSS.
Для начала, вам нужно создать HTML разметку для календаря, например, таблицу, в которой будут ячейки для каждого дня недели. Затем, используя JavaScript, вы можете заполнить эти ячейки числами дней, начиная с первого дня месяца, и учитывая текущий день недели.
Пример реализации:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calendar</title>
<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
width: 30px;
height: 30px;
text-align: center;
}
</style>
</head>
<body>
<table id="calendar">
<thead>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</thead>
<tbody id="calendar-body"></tbody>
</table>
<script>
const calendarBody = document.getElementById('calendar-body');
const daysInMonth = 31; // Можно определить для каждого конкретного месяца
const startDate = 1; // Номер начального дня недели в месяце (0 - воскресенье, 1 - понедельник и т.д.)
let day = 1;
for (let i = 0; i < Math.ceil((daysInMonth + startDate) / 7); i++) {
let row = document.createElement('tr');
for (let j = 0; j < 7; j++) {
let cell = document.createElement('td');
if (i === 0 && j < startDate) {
cell.textContent = '';
} else if (day <= daysInMonth) {
cell.textContent = day;
day++;
} else {
cell.textContent = '';
}
row.appendChild(cell);
}
calendarBody.appendChild(row);
}
</script>
</body>
</html>
Этот пример создает календарь на основе таблицы, в которой числа дней выводятся в соответствии с днями недели, начиная с указанного дня. Вам нужно будет настроить daysInMonth и startDate в соответствии с требуемым месяцем и неделей.
Надеюсь, это поможет вам создать календарь, который вы хотите отобразить! Если у вас есть другие вопросы, не стесняйтесь спрашивать.