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

Чтобы установить диапазон дат в календаре, вам нужно отслеживать состояние выделенных дат и изменять стили в зависимости от кликов. Вот общая идея реализации такого функционала с использованием JavaScript и CSS:

### 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>
```

### CSS
```css
.day {
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
}

.selected {
    background-color: gray;
}

.default {
    background-color: black;
    color: white;
}
```

### JavaScript
```javascript
const days = document.querySelectorAll('.day');
let selectedDay = null;

days.forEach(day => {
    day.addEventListener('click', () => {
        const currentDate = day.getAttribute('data-date');

        // Снятие выделения, если кликнули на уже выделенную дату
        if (selectedDay === currentDate) {
            resetSelection();
            selectedDay = null;
            return;
        }

        if (selectedDay === null) {
            // Первое выделение
            selectedDay = currentDate;
            day.classList.add('default');
        } else {
            // Выделение диапазона
            const startDate = new Date(selectedDay);
            const endDate = new Date(currentDate);
            const oneDay = 24 * 60 * 60 * 1000;

            if (startDate > endDate) {
                // Меняем порядок дат
                [startDate, endDate] = [endDate, startDate];
            }

            resetSelection();

            for (let d = startDate; d <= endDate; d.setDate(d.getDate() + 1)) {
                const formattedDate = d.toISOString().split('T')[0];
                const dayElement = document.querySelector(`.day[data-date="${formattedDate}"]`);
                if (dayElement) {
                    if (formattedDate !== startDate.toISOString().split('T')[0] && formattedDate !== endDate.toISOString().split('T')[0]) {
                        dayElement.classList.add('selected');
                    } else {
                        dayElement.classList.add('default');
                    }
                }
            }

            selectedDay = currentDate; // обновляем выделенный день
        }
    });
});

function resetSelection() {
    days.forEach(day => {
        day.classList.remove('selected', 'default');
    });
}
```

### Объяснение
1. **HTML**: Создаем календарь с днями, задавая каждому элементу атрибут `data-date` с соответствующей датой.
2. **CSS**: Создаем стили для выделения (серый фон) и для стандартного состояния (черный фон).
3. **JavaScript**:
   - Обрабатываем клики по дням.
   - Если кликнули на уже выделенный день, снимаем выделение.
   - Если кликнули на новый день, определяем диапазон от предыдущей выделенной даты до текущей.
   - Обновляем классы стилей для каждого дня в диапазоне.

Проверьте код, он должен корректно выделять диапазон дат согласно вашему описанию.