Marius Vasile

Marius Vasile

  • 594
  • 1.9k
  • 144.7k

Highlight days in array in jquery ui calendar

Jan 23 2023 2:27 PM

Ok, so I have a calendar and I want to highlight specific days that come from a json

Jquery calendar

<script>
    $( document ).ready(function() {
        $.getJSON(`?handler=LoadDaysCMP`, (data) => {
            dates = [];
            data.forEach(function(i,v){
            dates.push((new Date(i)).setHours(0,0,0,0).valueOf());
            })
        });
    });
    $(function () {
        $.datepicker.regional['ro'] = {
            closeText: 'Inchide', // set a close button text
            currentText: 'Astazi', // set today text
            monthNames: ['Ianuarie', 'Februarie', 'Martie', 'Aprilie', 'Mai', 'Iunie', 'Iulie', 'August', 'Septembrie', 'Octombrie', 'Noiembrie', 'Decembrie'], // set month names
            monthNamesShort: ['Ian', 'Feb', 'Mar', 'Apr', 'Mai', 'Iun', 'Iul', 'Aug', 'Sep', 'Oct', 'Noi', 'Dec'], // set short month names
            dayNames: ['Duminica', 'Luni', 'Marti', 'Miercuri', 'Joi', 'Vineri', 'Sambata'], // set days names
            dayNamesShort: ['Dum', 'Lun', 'Mar', 'Mie', 'Joi', 'Vin', 'Sam'], // set short day names
            dayNamesMin: ['Du', 'Lu', 'Ma', 'Mi', 'Jo', 'Vi', 'Sa'], // set more short days names
            dateFormat: 'dd/mm/yy' // set format date
        };

        $.datepicker.setDefaults($.datepicker.regional['ro']);


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

</script>

json

public async Task<JsonResult> OnGetLoadDaysCMPAsync()
{
    var data = await _context.CMPAvDates.Select(s => s.CMPDate).ToListAsync();
    return new JsonResult(data);
}

but how do I highlight days from json in calendar?


Answers (13)