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");
});
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);
}
For multiDatesPicker()
$(function() {
$('#from-input').multiDatesPicker({
beforeShow: function(elem, dp) {
updateDatePickerCells();
}
});
});
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}
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.
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
