По заданию нужно сделать календарь и стилизовать его с помощью 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>
Просто не нужно писать CSS стили напрямую в код. Добавьте к проекту CSS таблицы и манипулируйте классами. Например для всех ячеек определите класс .day { background-color: rgb(238, 238, 238); } а для выходных дней подставляйте к ячейке еще один класс. Например .Feier {background-color: rgb(181, 178, 178) !important;} Таким образом стиль цвета класса day будет переназначен.
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Пишу на React приложениеЕсть состояние, в котором следующее поле panelClassesActive, это объект, который содержит данные об активных элементах
Допустим, у нас есть 10 задач, которые нужно выполнить параллельно, но оперативной памяти (osfreemem()) хватает только на 7