Add custom classname to jquery calendar cell

Question

I am using Jquery calendar. I am trying to insert a new class name to each cell of calendar. It gets added but it is getting removed as and when the calendar is clicked.

Basically it refreshes the calendar on every click so newly added class is getting removed on refresh.

How do I retain the class name?

here is my code

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

Demo

SRK · Accepted Answer · 2016-10-06T11:13:13.503

Use callback functions of Datepicker Widget

    $('#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();
        }
    });
});

score 0 · Answer 2 · answered Oct 06 '16 at 07:12

0

Why don't you suppose to override the existing .ut-state-default background-color instead of going for adding new one?

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

answered Oct 06 '16 at 07:12

RaJesh RiJo

4,302
4
25
46

I am using class for other purpose not only for the bg color so it would be great to know the possibility of adding class name. – user6725932 Oct 06 '16 at 07:21

score 0 · Answer 3 · edited May 23 '17 at 11:48

0

It's a known tricky jQuery UI calendar issue, see this question jQuery ui - datepicker prevent refresh onSelect

Anyway, the fix is to add inst.inline = false; on select, like this

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

See a demo, note however, that it throws an error in multidatespicker.js. There seems to be an issue with this plugin.

edited May 23 '17 at 11:48

Community

1
1

answered Oct 06 '16 at 07:36

Theodore K.

5,058
4
30
46

But this removes the class when u click on next month. – user6725932 Oct 06 '16 at 09:30

score 0 · Answer 4 · answered Oct 06 '16 at 07:49

0

It would be better to use the existing class name and override its default styling.

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

Here is the same demo

answered Oct 06 '16 at 07:49

Gaurav Shekhadiya

106
1
3

Add custom classname to jquery calendar cell

4 Answers4