Как закрасить ячейки кастомного календаря?

Question

[Sanzhar Zhanibekov]

Здравствуйте! Задача очень простая но до меня не доходит.
Есть даты начала, конца проекта, и текущий день
фото 29 дня (момент создания вопроса)


Есть задача отметить диапазон зеленым цветом, а остальное черным

Сам алгоритм который занимается этим

const end_activity_dates = getEndDate(activities)
            let i = 0
            for (const [key, value] of Object.entries(activities)) {
                let color_progress = ''
                progress_display += `
                <div class="activity_box">
                                <div class="progress-placeholder">
                `


                const start_date = getStartDate(activities)[i]
                const end_date = new Date(end_activity_dates[i])


                console.log(start_date)
                console.log(end_date)
                for (let j = 1; j <= dayCount.length; j++) {
                    let date = new Date(new Date().getFullYear(), new Date().getMonth(), dayCount[j-1])
                    if (dayCount[j - 1] < dayCount[j]) {
                        date = new Date(new Date().getFullYear(), new Date().getMonth()+1, dayCount[j-1])
                    }



                    console.log(date)
                    if (date => start_date && date <= end_date) {
                        color_progress = "#93FF96"
                    } else
                        color_progress = "#000000"

                    progress_display += `
                    <div class="progress-bar" style="height: 100%; width: 6.67%; background-color: ${color_progress}"
                                         id="${value["id"]} + '-progress-day-' + ${dayCount[j-1]}"></div>

                    `
                }
                progress_display += `
                 </div>
                            </div>`
                i++
            }

Логика такая что одна линия это задача, в этой линии есть деления на 15 дней

ожидаю этого

Comments

[Сергей Сергей]

https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...

[Sanzhar Zhanibekov]

Сергей Сергей, Не понял вашего ответа

ожидаю этого

[Сергей Сергей]

Полосы можно раскрашивать фоновым градиентом, там есть пример. Вот только вычислять придётся много.
Другой вариант, на каждый день выделять прямоугольник, и несколько дней-прямоугольников располагать в полосы, ну и раскрашивать через классы и стили.

[Sanzhar Zhanibekov]

Сергей Сергей, это мне все понятно) просто не могу логику понять

конкретно вот этот алгоритм не работает правильно

for (let j = 1; j <= dayCount.length; j++) {
                    let date = new Date(new Date().getFullYear(), new Date().getMonth(), dayCount[j-1])
                    if (dayCount[j - 1] < dayCount[j]) {
                        date = new Date(new Date().getFullYear(), new Date().getMonth()+1, dayCount[j-1])
                    }



                    console.log(date)
                    if (date => start_date && date <= end_date) {
                        color_progress = "#93FF96"
                    } else
                        color_progress = "#000000"

[Сергей Сергей]

Что хранится в dayCount? Почему есть зависимость между соседними значениями?

Полагаю, это не то количество дней, которое можно так засунуть в new Date, сюда должен приходить конкретный день месяца. Но такой конструкцией можно воспользоваться, ибо

Так что, можно как-то вычислять даты через смещения.