Hi again,
I have just re-read your post and spotted that a javascript is allowed

So, here is a possible solution:
In the "ac-includes" > "js" >"mootools-public.js" file add this small function:
- Code: Select all
var leaveOnlyThisClass = function(el, cl){
el.set('class', el.get('class').split(' ').filter(function(c){return c == this },cl)[0]);
};
Then, replace the whole load_calendar() function in the js file with this:
- Code: Select all
// load calendar for month and year
function load_calendar(el,month,year){
var req = new Request({
async:false, // freeze browser whilst getting data - this way the elements are ready to be "clicked" :)
method: 'get',
url: url_ajax_cal,
data: {'id_item':id_item,'month':month,'year':year,'lang':lang},
evalScripts:true,
onRequest: function() {
el.set('html','<img class="img_loading_month" src="'+img_loading_month+'">');
},
onSuccess: function(response) {
el.set('html',response);
if(clickable_past=="off"){
document.id('the_months').getElements('.past').each(function(el) {
el.set('opacity','0.6');
});
}
// remove classes (except base)
leaveOnlyThisClass(el,'cal_month');
// add class to allow further month loading
el.addClass('load_cal');
// add month class (removed each time)
el.addClass('month_'+month+'');
}
}).send();
}
You will see that at the end of that function I have added a few lines that basically add a new class to the month div to define the month:
month_01
month_02
month_03
etc.
Finally, you need to modify the css file to use these new classes, something like this:
- Code: Select all
div.month_6 { border:1px solid red;}
div.month_6 div.cal_title{background: red;}
div.month_10{ border:1px dashed green;}
div.month_10 div.cal_title{background: green;}
etc.
I haven't added all the styles necesarry but I am sure that you will be able to work that out for yourself
Let me know how it goes and if you need any more help implementing this.
Chris