Highlight days in array in jquery ui calendar

Final working script, also with disabling weekend 

Thank you Naimish, that worked.

Sachin, thank you. I added

to my _Layout page but I have no change in script behavior

$.getJSON(`?handler=LoadDaysCMP`, (data) => {
                if (!jQuery.isEmptyObject(data)) {
                    var listOfEvents = data;
                    for (var i in listOfEvents) {
                        unavDates.push(moment(listOfEvents[i].date).utc().format('YY-MM-DD'));
                    }
                }
                
            });

Thank you Naimish, they way you have it works but my json does not give me dates in that format. Result from json is

2023-01-25T00:00:00,2023-01-24T00:00:00,2023-01-26T00:00:00 (yy-mm-dd)

btw, when I tried

var highlight_dates = ['2023-01-24T00:00:00', '2023-01-26T00:00:00', '2023-01-25T00:00:00'];
                        
                        var year = date.getFullYear();
                        var month = date.getMonth() + 1;
                        var day = date.getDate();

                        // Change format of date
                        var newdate = year + "-" + month + '-' + day + 'T00:00:00';

                        // Check date in Array
                        if (jQuery.inArray(newdate, highlight_dates) != -1) {
                            return [true, "highlight"];
                        }
                        return [true];

was not working. Why?

Hello Marrius,

Below is working code. Please check.

var highlight_dates = ['8-11-2022T00:00:00','11-11-2022T00:00:00','18-11-2022T00:00:00','1-12-2022T00:00:00']; 
$(function() {
$('#datepicker').datepicker({
  dateFormat: 'yyyy-mm-dd',
       beforeShowDay: function(date){
           var month = date.getMonth()+1;
           var year = date.getFullYear();
           var day = date.getDate();

           // Change format of date
           var newdate = day+"-"+month+'-'+year+'T00:00:00';

           // Check date in Array
           if(jQuery.inArray(newdate, highlight_dates) != -1){
                // Pass class name and tooltip text
                return [true, "highlight"];
           }
           return [true];
       }
   });
});

Thanks

Naimish Makwana

Try to use moment.js for date format

var unavDates = new Array();
        $.getJSON(`?handler=LoadDaysCMP`, (data) => {
            var listOfEvents = data;
            for (var i in listOfEvents) {
                unavDates.push(moment(listOfEvents[i].date).utc().format('YY-MM-DD'));
            }
           
        });

$("#datepicker").datepicker({
            firstDay: 1,
            dateFormat: "yy-mm-dd",
            beforeShowDay: checkDates,
            onSelect: function () {
            var selected = $(this).val();
            $("#dataSelect").val(selected);
            }
        });

        function IsWeekend(date) {
            if (date.getDay() === 0 || date.getDay() === 6) return true;
            else return false;
        };
        debugger;
        function checkDates(date) {
            var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
            var isDisabled = (!IsWeekend(date)) && (unavDates.indexOf(string) == -1);
            return isDisabled;
        };

Thank you Naimish, my function works very well if array is like

var unavDates = ["2023-01-23", "2023-01-24", "2023-01-25"], I can't manage to converse date type 2023-01-25T00:00:00

Anyway, I implemented your suggestion like

beforeShowDay: function (date) {
   var year = date.getFullYear();
   var month = date.getMonth() + 1;
   var day = date.getDate();
        var newdate = year + "-" + month + '-' + day;
        if (jQuery.inArray(newdate, unavDates) != -1) {
        return [true, "highlight"];
        };
         return [true];
         },

but I have no highlight in calendar. array unavDates output is

2023-01-25T00:00:00,2023-01-24T00:00:00,2023-01-26T00:00:00

What am I doing wrong?

Thank you

Hello Marrius,

Please try below code.

You can change the date formate as below.

CSS

.highlight a{
   background: #29f274 !important;
   color: #ffffff !important;
}

Reference link for detail : 

https://makitweb.com/how-to-highlight-selected-date-in-jquery-ui-datepicker/#:~:text=Define%20beforeShowDay%20within%20datepicker(),%5D%3B%20otherwise%20return%20%5Btrue%5D%20.

Thanks

I think I know where the problem is. json gets data in this format

2023-01-25T00:00:00,2023-01-24T00:00:00,2023-01-26T00:00:00

and I use

var string = jQuery.datepicker.formatDate('yy-mm-dd', date);

But how it should look like?

So, the below script works but the final part is not working despite json provide data

This (unavDates.indexOf(string) == -1) suposed to highlight the dates from json but is not

Thank you Pasang, I will try. I had this function but there is something wrong with it

beforeShowDay: function (date) {
                    var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                    var isDisabled = (!IsWeekend(date)) && (holidayDates.indexOf(string) == -1); // used to disable if its an holiday or weekend
                    return [isDisabled];

Hi,

I would suggest to use beforeShowDay option. Please check below link for more detail and example

https://www.geeksforgeeks.org/jquery-ui-datepicker-beforeshowday-option/

Regards,
Pasang