Как изменить цвет выделенного диапазона в календаре?

Для изменения цвета выделенного диапазона в календаре вам нужно провести модификацию CSS или использовать JavaScript, в зависимости от того, как ваш календарь реализован. Ниже приведен общий подход для простого календаря на HTML, CSS и JavaScript.

### Пример с использованием HTML, CSS и JavaScript

1. **HTML** - создайте структуру календаря:

```html
<div id="calendar">
  <div class="day" data-date="2023-10-07">7</div>
  <div class="day" data-date="2023-10-08">8</div>
  <div class="day" data-date="2023-10-09">9</div>
  <div class="day" data-date="2023-10-10">10</div>
</div>
```

2. **CSS** - добавьте стили для дней:

```css
.day {
  display: inline-block;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border: 1px solid #000;
  margin: 5px;
  transition: background-color 0.3s;
}

.grey {
  background-color: grey;
}

.black {
  background-color: black;
  color: white; /* чтобы черные дни имели белый текст */
}
```

3. **JavaScript** - напишите скрипт для изменения цвета:

```javascript
const startDate = new Date('2023-10-07');
const endDate = new Date('2023-10-10');

const calendarDays = document.querySelectorAll('.day');

calendarDays.forEach(day => {
  const currentDate = new Date(day.dataset.date);

  if (currentDate > startDate && currentDate < endDate) {
    day.classList.add('grey');
  } else {
    day.classList.add('black');
  }
});
```

### Процесс:

1. В HTML создаются блоки для каждого дня.
2. CSS задает стили для классов `.grey` и `.black`.
3. В JavaScript выбираются элементы с классом `.day`, и в зависимости от их даты они получают соответствующие классы для задания цвета.

Теперь, когда вы запустите этот код, 7-й и 10-й дни будут черного цвета, а 8-й и 9-й — серого. Этот код можно адаптировать под любое другое применение или фреймворк, который вы используете.

Если не хочешь использовать date-picker из какого-нибудь фрейма то как сделать свой: <br/> ps. если очень не любишь ; то привыкай, сложно понять где что закончилось именно на хабре <br/> <br/> <pre><code class="javascript">let startDate = null;
let endDate = null;

// в updateInput добавь
for (let i = 0; i &lt; monthDetails.length; i++) {
                    if (monthDetails[i].month === 0) {
                        if (monthDetails[i].date.toString() === cell_date) {
                            // для проверки рейнджа
                            if (!startDate || (startDate &amp;&amp; endDate)) {
                                // На первый клик или новый рейндж
                                clearSelection();
                                startDate = monthDetails[i].timestamp;
                                cell.classList.add("isSelected");
                            } else {
                                // Второй клик
                                endDate = monthDetails[i].timestamp;
                                highlightRange();
                            }
                        }
                    }
                }

//хелперы
const clearSelection = () =&gt; {
    startDate = null;
    endDate = null;
    document.querySelectorAll(".cell_wrapper").forEach(cell =&gt; {
        cell.classList.remove("isSelected", "inRange");
    });
};

const highlightRange = () =&gt; {
    if (startDate &gt; endDate) {
        [startDate, endDate] = [endDate, startDate];
    }

    document.querySelectorAll(".cell_wrapper").forEach(cell =&gt; {
        if (cell.classList.contains("current")) {
            const cellDate = new Date(year, month, parseInt(cell.textContent)).getTime();
            
            if (cellDate === startDate || cellDate === endDate) {
                cell.classList.add("isSelected");
            } else if (cellDate &gt; startDate &amp;&amp; cellDate &lt; endDate) {
                cell.classList.add("inRange");
            }
        }
    });
};</code></pre> <br/> у меня работает,  большая часть логики отсюда <a href="https://vue3datepicker.com/" rel="nofollow">vueDatePicker</a> , как-то раз очень пригодилось <br/> <pre><code class="css">.cell_wrapper.inRange {
    background-color: #f0f0f0;
    color: #272727;
}

.cell_wrapper.current.inRange {
    background-color: #e0e0e0;
    border-radius: 0;
}

.cell_wrapper.isSelected {
    border-radius: 50%;
    background-color: #272727;
    color: #fff;
}</code></pre>