Jquery datepicker adding css class to certain dates

Jquery datepicker adding css class to certain dates

I am using the Jquery datepicker and everything is working fine and all
styled how i want apart from any events i have in the database.
I would like any day that has an event to have a style using .my_class so
instead of the default styling, it has a different colour. I would like
this to apply for days that are in other months so if there's an event on
the 1st of the next month, then style that.
I have used this to style the days of the other months to how i want but
using something similar for the days with events doesn't work.
This works by changing the background colour of the other months
.ui-datepicker-other-month.ui-state-disabled:not(.my_class) span {
background: #fff;
color: #b4b3b3;
}
This doesn't work
.ui-datepicker-other-month.ui-state-disabled .my_class span {
background: #f00;
color: #b4b3b3;
}
This is the jquery for the datepicker and adding .my_class to any table
cells that have an event
var selected_dates = new Array();
// gets all the events from the database using AJAX
selected_dates = getSelectedDates();
$('#datepicker').datepicker({
inline: true,
dateFormat: 'yy-m-d',
showOtherMonths: true,
dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
beforeShowDay: function (date)
{
// gets the current month, day and year
// Attention: the month counting starts from 0 that's why
you'll need to +1 to get the month right
var mm = date.getMonth() + 1,
dd = date.getDate(),
yy = date.getFullYear();
var dt = yy + "-" + mm + "-" + dd;
if(typeof selected_dates[dt] != 'undefined')
{
// puts a special class to the dates in which you have
events, so that you could distinguish it from the other
ones
// the "true" parameter is used to know which are the
clickable dates
return [true, " my_class"];
}
return [false, ""];
},
onSelect: function(date)
{
// puts the event's title in the dialog box
$("#dialog").attr("title",selected_dates[date]['event_title']);
// for the first time you open the popup
$("#dialog").dialog("option","title",selected_dates[date]['event_title']);
// puts the event's description text in the dialog box
$("#dialog").text(selected_dates[date]['event_description']);
// show the dialog box
$("#dialog" ).dialog();
}
});