dima85,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div.datepicker--cell.datepicker--cell-day.dp-note{
border: #FF0000 2px solid;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.min.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.min.js"></script>
<script>
$(function() {
var eventDates = ['2019-10-01', '2019-10-10', '2019-10-12', '2019-10-22'].map(a => (a = new Date(a), a.setHours(0,0,0,0), a.getTime())),
$picker = $('.date');
$picker.datepicker({
onRenderCell: function (date, cellType) {
var currentDate = date.getTime();
if (cellType == 'day' && eventDates.indexOf(currentDate) != -1) {
return {
classes: "dp-note"
}
}
}
})
// Select initial date from `eventDates`
var currentDate = currentDate = new Date();
$picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))
});
</script>
</head>
<body>
<div class="date"></div>
</body>
</html>