Как в air datepicker сделать что бы выделялись даты которые есть?

Question

[I_want_to_know]

Всем привет!
Использую air datepicker, и возникла задача:
Сделать так, что бы выделялись в календаре даты которые есть в БД.
Подробнее:
Сайт на WP,
Для дат использую кастомные поля ACF (my_date)
Хочу что бы в календаре air_datepicker была подсветка дат таким образом:
Текущая дата - красная, жирная.
Даты которые есть в БД - зеленые, жирные.
Все остальные даты - серые.
Буду признателен за совет.

Answer 1

[ruyurik]

Я в JS переопределяю onRenderCell и внутри добавляю классы по условиям (которые потом красишь в CSS) - кусок кода у меня...arrDpres, arrDlbu, holDays - массивы с датами по которым раскрашиваю:

var i = 0;
 $('.datepicker-onlinezapis').datepicker({
	onRenderCell: function (date, cellType) {
					var day = date.getDay(), isDisabled = false;
					var dt4 = new Date(date);
						dt4.setDate(dt4.getDate() + 1 );
					var curcalday = dt4.toJSON().slice(0, 10); // преобразуем дату из формата DateTime в yyyy-mm-dd

					for (i = 0; i <  arrDpres.length; i++){
						if (arrDpres[i] == curcalday){
							return {
								classes: 'datapicker-datesindb'
							}
						}
					}

					for (i = 0; i <  arrDlbu.length; i++){
						if (arrDlbu[i] == curcalday){
							return {
								classes: 'datapicker-lockedbyuser'
							}
						}
					}

					for (i = 0; i < holDays.length; i++){
						if (holDays[i] == dateFormat(curcalday)){
							isDisabled = true;
							return {
								disabled: isDisabled
							}
						}
					}
					if (cellType == 'day') {
						isDisabled = disabledDays.indexOf(day) != -1;
							
						return {
							disabled: isDisabled
						}
					}

					
				}