Для выделения дат, которые уже выбраны или хранятся в БД, вам понадобится добавить кастомные классы к этим датам в календаре air datepicker.
1. Найдите в вашем шаблоне функцию, отрисовывающую календарь air datepicker. Обычно это функция `renderCalendar()`.
2. Внутри этой функции добавьте условие, которое проверяет, является ли текущая дата выбранной или хранящейся в БД, и присваивает соответствующий класс.
Пример кода может выглядеть так:
```javascript
function renderCalendar() {
// ... код отрисовки календаря
// Получите список дат, хранящихся в БД
const dbDates = ['2021-01-01', '2021-01-05', '2021-01-10']; // замените на свой список дат из вашей БД
// Установите класс для каждой ячейки календаря
calendar.find('.adp-day:not(.adp-disabled)').each(function () {
const date = $(this).attr('data-date');
if (date === getCurrentDate()) {
$(this).addClass('current-date');
} else if (dbDates.includes(date)) {
$(this).addClass('db-date');
} else {
$(this).addClass('normal-date');
}
});
// ... остальной код отрисовки календаря
}
```
3. В вашем CSS определите стили для каждого класса, задавая соответствующий цвет и стиль (жирный или обычный).
```css
.current-date {
color: red;
font-weight: bold;
}
.db-date {
color: green;
font-weight: bold;
}
.normal-date {
color: gray;
}
```
4. Ваши текущие даты будут выделены красным и жирным цветом, даты из БД - зеленым и жирным цветом, а остальные даты - серым цветом.
Измените `dbDates` на ваш список дат из вашей БД. Если у вас будет большое количество дат, рекомендуется получать список дат через AJAX запрос на сервер, чтобы не перегружать страницу слишком большим количеством данных.