calendar

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Календарь</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #0f79c3;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .highlight {
            color: #0c2646;
            border-radius: 95%;
            border: 5px solid #ECFF67; 
            display: block; /* Изменено на block */
            width: 60px;
            height: 60px;
            line-height: 60px;
            background-color: #FFAC55; 
           
        }
        .calendar {
            background-color: #0c2646;
            color: #fff;
            padding: 12px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .calendar table {
            width: 100%;
            border-collapse: collapse;
        }
        .calendar th, .calendar td {
            padding: 40px;
            text-align: center;
        }
        .calendar th {
            background-color: #FFAC55;
            font-size: 1.5em;
        color:#0c2646;}
        .calendar td {
            background-color: #0c2646;  /* тело календаря */
            font-size: 2em;
            position: relative; /* Добавлено */
        }
        
      
        .month-year {
            text-align: center;
            font-size: 2em;
            margin-bottom: 15px;
        color:#FFAC55}
    </style>
</head>
<body>
    <div class="calendar">
        <div class="month-year" id="month-year"></div>
        <table>
            <thead>
                <tr>
                    <th>Пн</th>
                    <th>Вт</th>
                    <th>Ср</th>
                    <th>Чт</th>
                    <th>Пт</th>
                    <th>Сб</th>
                    <th>Вс</th>
                </tr>
            </thead>
            <tbody id="calendar-body">
                
            </tbody>
        </table>
    </div>

    <script>
        function generateCalendar(month, year) {
            const calendarBody = document.getElementById('calendar-body');
            const monthYear = document.getElementById('month-year');
            const monthNames = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];

            calendarBody.innerHTML = '';
            monthYear.innerHTML = `${monthNames[month]} ${year}`;

            const daysInMonth = new Date(year, month + 1, 0).getDate();
            const firstDay = (new Date(year, month, 1).getDay() + 6) % 7; // Сдвиг для начала недели с понедельника

            const highlightDates = [25]; // Массив дат для выделения

            let date = 1;
            for (let i = 0; i < 6; i++) {
                const row = document.createElement('tr');

                for (let j = 0; j < 7; j++) {
                    const cell = document.createElement('td');
                    if (i === 0 && j < firstDay) {
                        cell.innerHTML = '';
                    } else if (date > daysInMonth) {
                        break;
                    } else {
                        if (highlightDates.includes(date) && month === 8 && year === 2024) {
                            cell.innerHTML = `<div class="highlight">${date}</div>`;
                        } else {
                            cell.innerHTML = date;
                        }
                        date++;
                    }
                    row.appendChild(cell);
                }

                calendarBody.appendChild(row);
            }
        }

        generateCalendar(8, 2024);
    </script>
</body>
</html>
Editor is loading...