Как оформить ячейки между двумя временными интервалами?

Question

Я хочу сделать возможным стилизацию ячеек между двумя временными интервалами, например:

Дата начала 01.03.2009 и дата окончания 15/06/2019, ячейки разделеныпо столбцу, который представляет месяц.Итак, что я сделал на данный момент, так это то, что я получаю эту дату из базы данных и помещаю ее в соответствующую ячейку.Но с моим решением CSS перезаписывается, и я не получаю желаемый результат.Для одного месяца это просто, но если один интервал идет в разный месяц, как начало в ФЕВ и заканчивается в МАЙ, это трудно для меня (не для полного месяца, но, например, 15 ФЕВ и 20 мая

Вот так будет выглядеть ячейка за один месяц

Для разных месяцев отличается.

Это сетка, где я должен стилизовать ячейки

.

Моя проблема в том, что мне нужно получить доступ к другому месяцу, и мой CSS перезаписан ... Я использую ключевое слово! Важный, но все еще не работает.Кто-нибудь, кто имеет какие-либо другие идеи?

Это мой код

                                int valueOfStartDay = (int) (((double) startDayValue / (double) startMonthLength) * 100);
                            int valueOfEndDay = 100 - valueOfStartDay;
                            //(int) (((double) endDayVAlue / (double) endMonthLength) * 100);
                            if (start_Date.getMonth() == columnDate.getMonth() && end_Date.getMonth() == columnDate.getMonth())
                            {
                                extraCellStyle = getExtraCellStyleStartDay(valueOfStartDay) +
                                                    extraCellStyle + getExtraCellStyleEndDay(valueOfEndDay);
                            }
                            else
                            {
                                if (start_Date.getMonth() == columnDate.getMonth())
                                {
                                    extraCellStyle = getExtraCellStyleStartDay(valueOfStartDay) + extraCellStyle;
                                }
                                else if (end_Date.getMonth() == columnDate.getMonth())
                                {
                                    extraCellStyle = getExtraCellStyleEndDay(valueOfStartDay) + extraCellStyle;
                                }
                                else
                                {
                                    extraCellStyle = " v-table-cell-content-" +
                                            CELLSTYLE_100_PRECENTSTART + extraCellStyle + " v-table-cell-content-"
                                                + CELLSTYLE_100_PRECENTEND;
                                }
                            }

и метод, который я использую также:

это для началадата, но конец один и тот же, только имя.

    private String getExtraCellStyleStartDay(int value)
{
    String extraCellStyle = "";
    if (value <= 5)
    {
        extraCellStyle = " v-table-cell-content-" + CELLSTYLE_100_PRECENTSTART;
    }
    else if (value <= 10)
    {
        extraCellStyle = " v-table-cell-content-" + CELLSTYLE_10_PRECENTSTART;
    }
    else if (value <= 20)
    {
        extraCellStyle = " v-table-cell-content-" + CELLSTYLE_20_PRECENTSTART;
    }
    else if (value <= 30)
    {
        extraCellStyle = " v-table-cell-content-" + CELLSTYLE_30_PRECENTSTART;
    }
    else if (value <= 40)
    {
        extraCellStyle = " v-table-cell-content-" + CELLSTYLE_40_PRECENTSTART;
    }
    else if (value <= 50)
    {
        extraCellStyle = " v-table-cell-content-" + CELLSTYLE_50_PRECENTSTART;
    }
    else if (value <= 60)
    {
        extraCellStyle = " v-table-cell-content-" + CELLSTYLE_60_PRECENTSTART;
    }
    else if (value <= 70)
    {
        extraCellStyle = " v-table-cell-content-" + CELLSTYLE_70_PRECENTSTART;
    }
    else if (value <= 80)
    {
        extraCellStyle = " v-table-cell-content-" + CELLSTYLE_80_PRECENTSTART;
    }
    else if (value <= 90)
    {
        extraCellStyle = " v-table-cell-content-" + CELLSTYLE_90_PRECENTSTART;
    }
    else if (value <= 100)
    {
        extraCellStyle = " v-table-cell-content-" + CELLSTYLE_100_PRECENTSTART;
    }
    return extraCellStyle;
}

и мой css:

  .v-table-cell-content-10-percentageStart>.v-table-cell-wrapper {
     background-size: 10% 100% !important;
    background-repeat: no-repeat;
    background-position: right;
}

.v-table-cell-content-20-percentageStart>.v-table-cell-wrapper {
     background-size: 20% 100% !important;
    background-repeat: no-repeat;
    background-position: right;
}

.v-table-cell-content-30-percentageStart>.v-table-cell-wrapper {
     background-size: 30% 100% !important;
    background-repeat: no-repeat;
    background-position: right;
}

.v-table-cell-content-40-percentageStart>.v-table-cell-wrapper {
    background-size: 40% 100% !important;
    background-repeat: no-repeat;
    background-position: right;
}

    .v-table-cell-content-50-percentageStart>.v-table-cell-wrapper {
    background-size: 50% 100% !important;
    background-repeat: no-repeat;
    background-position: right;
}

.v-table-cell-content-60-percentageStart>.v-table-cell-wrapper {
    background-size: 60% 100% !important;
    background-repeat: no-repeat;
    background-position: right;
}

.v-table-cell-content-70-percentageStart>.v-table-cell-wrapper {
     background-size: 70% 100% !important;
    background-repeat: no-repeat;
    background-position: right;
}

.v-table-cell-content-80-percentageStart>.v-table-cell-wrapper {
    background-size: 80% 100% !important;
    background-repeat: no-repeat;
    background-position: right;
}

.v-table-cell-content-90-percentageStart>.v-table-cell-wrapper {
     background-size: 90% 100% !important;
    background-repeat: no-repeat;
    background-position: right;
}

.v-table-cell-content-100-percentageStart>.v-table-cell-wrapper {
    background-size: 100% 100% !important;
    background-repeat: no-repeat;
}

     .v-table-cell-content-10-percentageEnd>.v-table-cell-wrapper {
     background-size: 10% 100% !important;
}

.v-table-cell-content-20-percentageEnd>.v-table-cell-wrapper {
     background-size: 20% 100% !important;
}

    .v-table-cell-content-30-percentageEnd>.v-table-cell-wrapper {
     background-size: 30% 100% !important;
}

.v-table-cell-content-40-percentageEnd>.v-table-cell-wrapper {
    background-size: 40% 100% !important;
}

    .v-table-cell-content-50-percentageEnd>.v-table-cell-wrapper {
    background-size: 50% 100% !important;
}

.v-table-cell-content-60-percentageEnd>.v-table-cell-wrapper {
    background-size: 60% 100% !important;;
}

.v-table-cell-content-70-percentageEnd>.v-table-cell-wrapper {
    background-size: 70% 100% !important;;
}

.v-table-cell-content-80-percentageEnd>.v-table-cell-wrapper {
    background-size: 80% 100% !important;
}

.v-table-cell-content-90-percentageEnd>.v-table-cell-wrapper {
    background-size: 90% 100% !important;;
}

.v-table-cell-content-100-percentageEnd>.v-table-cell-wrapper {
    background-size: 100% 100%;
}

Возможно ли это,У меня есть способ определить все случаи и сделать это статичным, но наверняка это не лучший вариант.