Add custom class name to jquery calendar cell

Question

I am using jQuery calendar. I am trying to insert a new class name in each calendar cell. It is added, but it is deleted as you click on the calendar.

It basically updates the calendar on every click, so the new updated class is deleted when it is updated.

How to save a class name?

here is my code

$(function() {
  $('#custom-date-format').multiDatesPicker({
    dateFormat: "y-m-d"
  });
  $('.ui-state-default').addClass("calendar_bg");
});

Demo

Answer 1

Use Datepicker widget callback functions

    $('#DatePicker').datepicker({
       //The calendar is recreated OnSelect for inline calendar
        onSelect: function (date, dp) {
           updateDatePickerCells();
        },
        onChangeMonthYear: function(month, year, dp) {
            updateDatePickerCells();
        },
        beforeShow: function(elem, dp) { //This is for non-inline datepicker
            updateDatePickerCells();
        }
    });

    updateDatePickerCells();

    function updateDatePickerCells(dp) {
        /* Wait until current callstack is finished so the datepicker
           is fully rendered before attempting to modify contents */
        setTimeout(function () {
            $('.ui-datepicker td > *').each(function (idx, elem) {
                $(this).addClass("calendar_bg");
            });
        }, 0);
    }

See demo

For multiDatesPicker ()

$(function() {
    $('#from-input').multiDatesPicker({
        beforeShow: function(elem, dp) {
            updateDatePickerCells();
        }
    });
});

Answer 2

Why don't you override the existing background color .ut-state-defaultinstead of adding a new one?

.ui-state-default{background: #ffeb3b !important}

Answer 3

jQuery UI, . jQuery ui - datepicker onSelect

In any case, the fix is ​​to add inst.inline = false;to select, e.g.

$('#custom-date-format').multiDatesPicker({
    dateFormat: "y-m-d",    
    onSelect: function(date, inst){
        inst.inline = false;
        $('.ui-state-default').addClass("calendar_bg");
    }    
});

See the demo, notice that it causes an error in multidatespicker.js. It seems that the problem is with this plugin.

Answer 4

It is better to use an existing class name and override the default style.

Add this style .ui-widget-content a.ui-state-default { background: #ffeb3b }

Here is the same demo