I want to set up a calendar in such a way that it would show the years, months and dates in an array. I think this should work in the onRenderCell function but don't fully understand it.
In AirDatepicker, the days of the month, 12 months and a window of years are drawn separately. The numbers of the month are displayed correctly. Months and years are not displayed.
my html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<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>
</head>
<body>
<input type="text" id="datepicker">
<script src="main.js"></script>
</body>
</html>
my js
let days = [ "2022-4-15", "2022-5-3", "2022-4-1", "2021-2-20"];
$('#datepicker').datepicker({
onRenderCell: function (date, cellType) {
new_date = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
//all dates passive
let disabled = true;
//if the date is in the array, she becomes active
if (cellType == 'day'){
disabled = days.indexOf(new_date) == -1
}
//called but not working
if (cellType == 'month' && disabled == false){
disabled = days.indexOf(new_date) == -1
}
if (cellType == 'year' && disabled == false){
disabled = days.indexOf(new_date) == -1
}
return {disabled: disabled}
}
});
Tell me what exactly am I doing wrong? How to make it so that when choosing months, those of them that have the desired dates are displayed?