I am using beforeShowDay and have assigned the class specialDay to particular days in my calendar; this works fine, however I am having trouble understanding how to style the class and how the css from theme roller is working in general. I have tried:
td .specialDate {
background: #33CC66;
}
but this has no affect on the look of the calendar. Any ideas?
I had the same problem, fortunately i found the answer. When you disable a day (set to "false") is valid to assign a class (".specialDate") to change the background color, but not if the date is enabled, because we have another styled anchor ("a") that overrides the class assigned to "td" anchor.
So, if your date is enabled to select and want to change the styles, you have to edit the inherited "a" anchor, like this:
.specialDate a { background: #33CC66 !important; }
It's very important that you add the "!important" (if you'll forgive the repetition) indication in order to override other settings.
Hope this can help!
Create your css style like this:
<style type="text/css">
td.specialDay, table.ui-datepicker-calendar tbody td.specialDay a {
background: none !important;
background-color: #fffac2 !important;
color: #006633;
}
</style>
Then add your style to calendar using beforeShowDay option.
$('#datepicker').datepicker('option', 'beforeShowDay', highlightDays);
// ------------------------------------------------------------------
// highlightDays
// ------------------------------------------------------------------
function highlightDays(date) {
for (var i = 0; i < dates.length; i++) {
if (SOME CONDITION TO DETERMIN SPECIAL DAY) {
return [true, 'specialDay'];
}
}
return [true, ''];
}
.specialDate span {background-color:#ff0000!important;}
if you want to disable transparency effect
.specialDate {filter:Alpha(Opacity=100)!important; opacity: 1!important}
If the ui calendar has a theme, you must disable the background-image for the specialDate attribute:
.specialDate a {
background-image: none !important;
background: #33CC66 !important;
}
Whenever i'm using the JQuery UI stuff I use Firebug to check out any styles being applied to particular elements, this will enable you to easily identify which CSS elements you need to play with.
Here's a bit that will highlight either the current date or the date from the associated text box.
The style:
.dateHighlight a { background: #58585a !important; }
The script:
var pickerDate;
$("#pickerId").datepicker({
// get the date to be highlighted; use today if no date
beforeShow: function() {
pickerDate = $("#pickerId").datepicker("getDate");
if (pickerDate == null) pickerDate = new Date((new Date()).setHours(0, 0, 0, 0));
},
// add css class to the date
beforeShowDay: function(date) {
if (date.getTime() == pickerDate.getTime()) {
return [true, 'dateHighlight', '']
}
return [true]
}
});
Using on click you can do all the css you need:
var checkin = $('.dpd1').datepicker()
.on('click', function (ev) {
$('.datepicker').css("z-index", "999999999");
}).data('datepicker');
