Календарь, меняющий месяца и годы

126
04 декабря 2020, 11:20

По заданию нужно сделать календарь и стилизовать его с помощью js. У меня не выходит перекрасить выходные в тёмно-серый. Использую селекторы для этого, а они не работают, хотя, если выводить в консоль выбранные дни, то массив дней правильный.
Так же кнопка < должна выводить прошлый месяц этого же года, а << - прошлый год, но месяц тот же.

//getDate - номер дня 
//getDay - день недели 
function calendar () { 
    const monthNames = ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", 
        "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь" 
    ]; 
    let mon = prompt('Какой сейчас месяц по счёту?'); 
    //в js отсчет начинается с 0, а не 1 
    month = mon - 1; 
    year = prompt('Какой сейчас год?'); 
    let calendaricForYou = new Date( year, month ); 
    let elem = document.getElementById('calendaric'); 
    let table = '<table id = tableOfDays><tr><td class = RedCat><button id = YearBefore><<</button></td><td class = RedCat><button id = MonthBefore><' + 
        '</button></td><td colspan=3 id = forMonth class = RedCat></td>' + 
        '<td class = RedCat><button id = MonthAfter>></button></td><td class = RedCat><button id = YearAfter>>>' + 
        '</button></td></tr><tr id = hiddenDates><th>пн</th><th>вт</th><th>ср</th><th>чт</th><th>пт</th><th>сб</th><th>вс</th></tr><tr>'; 
 
    //заполнение ячейками в зависимости от того, с какого дня недели начинается месяц 
    for (let i = 0; i < getDay(calendaricForYou); i++) { 
        table += '<td></td>'; 
    } 
 
    //заполнение ячеек цифрами 
    while(calendaricForYou.getMonth() ===  month){ 
        table += '<td>'+calendaricForYou.getDate()+'</td>'; 
        //если доходим до воскресения, то нужен перевод строки 
        if(calendaricForYou.getDay() % 7 === 0){ 
            table += '</tr><tr>'; 
        } 
        calendaricForYou.setDate(calendaricForYou.getDate() + 1); 
    } 
 
    //добавляем ячейки, если заканчивется не в воскресенье 
    if(getDay(calendaricForYou) !== 0 ){ 
        for(let i = calendaricForYou.getDay(); i <= 7; i++){ 
            table += '<td></td>'; 
        } 
    } 
 
    table += '</tr></table>'; 
    //добавляем код в body 
    elem.innerHTML = table; 
 
    //добавляем свойства 
    let hiddenTR = document.getElementById('hiddenDates'); 
    hiddenTR.style.display = 'none'; 
    let tableOfDays = document.getElementById('tableOfDays'); 
    tableOfDays.style.borderCollapse = 'collapse'; 
    tableOfDays.style.margin = '0 auto'; 
    let otherTD = document.getElementsByTagName("td"); 
    for (let i = 0; i<otherTD.length; i++){ 
        let other_TD = otherTD[i]; 
        other_TD.style.borderStyle = 'solid'; 
        other_TD.style.borderColor = '#dddddd'; 
        other_TD.style.borderWidth = '2px'; 
        other_TD.style.padding = '3px'; 
        other_TD.style.textAlign = 'center'; 
        other_TD.style.backgroundColor = '#eee'; 
        other_TD.style.width = '30px'; 
        other_TD.style.height = '30px'; 
        for(let j = 0; j>getDay(calendaricForYou); j++){ 
            other_TD.style.backgroundColor = 'white!important'; 
 
        } 
    } 
    //не работает!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 
    let holidayTD = document.querySelectorAll("td:nth-child(n+6)"); 
    for (let i = 0; i<holidayTD.length; i++) { 
        let holiday_TD = holidayTD[i]; 
        holiday_TD.style.backgroundColor = '#4257!important'; 
    } 
    let forMonth = document.getElementById('forMonth'); 
    forMonth.style.color = 'white'; 
    forMonth.style.textTransform = 'uppercase'; 
    forMonth.innerHTML = monthNames[month]; 
 
    let button = document.getElementsByTagName("button"); 
    for (let i = 0; i<button.length; i++) { 
        let button_ = button[i]; 
        button_.style.backgroundColor = 'white'; 
        button_.style.borderRadius = '10px'; 
        button_.style.cursor = 'pointer'; 
        button_.style.borderStyle = 'solid'; 
        button_.style.outline = 'none'; 
    } 
    let redTD = document.getElementsByClassName('RedCat'); 
    for (let i = 0; i<redTD.length; i++) { 
        let red_TD = redTD[i]; 
        red_TD.style.backgroundColor = '#e33'; 
    } 
    let monthBefore = document.getElementById('MonthBefore'); 
    monthBefore.onclick = function(){ 
        month = mon - 2; 
    } 
 
} 
 
//получить номера дней недели 
function getDay(date) { 
    let day = date.getDay(); 
    if (day === 0) day = 7; 
    return day - 1; 
} 
 
calendar();
<div id ='calendaric'></div>

Answer 1

Просто не нужно писать CSS стили напрямую в код. Добавьте к проекту CSS таблицы и манипулируйте классами. Например для всех ячеек определите класс .day { background-color: rgb(238, 238, 238); } а для выходных дней подставляйте к ячейке еще один класс. Например .Feier {background-color: rgb(181, 178, 178) !important;} Таким образом стиль цвета класса day будет переназначен.

READ ALSO
Ошмбка в javascript

Ошмбка в javascript

Раньше всё работало нормально, и тут не понятно из за чего ввылезает ошибка

120
Как правильно проситроить объекст javascript?

Как правильно проситроить объекст javascript?

Пишу на React приложениеЕсть состояние, в котором следующее поле panelClassesActive, это объект, который содержит данные об активных элементах

131
Как реализовать простую очередь в NodeJS?

Как реализовать простую очередь в NodeJS?

Допустим, у нас есть 10 задач, которые нужно выполнить параллельно, но оперативной памяти (osfreemem()) хватает только на 7

125
Нужна помощь с Web чатом на Java и WebSocket

Нужна помощь с Web чатом на Java и WebSocket

Сама настройка веб сокета

126