Different colors for different months.

[Jasonbiggs]

I would like to thank you for your awesome calendar and will surely donate some money so that you can continue to support the calendar.

I was wondering if there was anyway through CSS or Javascript to have different colors for different months when the calendar is in a 12 month view. On top of booking dates and the like I would like certain months to show up as a different color from the other months. Currently I can see how I can change color of the entire calendar but I'm not sure if make the month of December a different color from everything else and have it be that way each year without having to modify the CSS each year. I have already thought about adding a css for the divs that make up the months though I'm not sure how I would execute it so that I don't need to change it next year or the year after that. Could you help me out with that if possible?

[chris]

Hi there,
Thanks for your comments

What you are requesting is actually a bit trickier than it might sound due to the way that the months are actually loaded
It could be done via javascript (mootools) fairly simply but the best method would be for it to be done via php and css.

I will take a look at it and get back to you....

Chris

[chris]

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

[Jasonbiggs]

Sorry. I feel like a jerk for not looking back at the post sooner. I didn't expect to receive an answer so quickly. I'll check it out later tonight (eastern US) and post how everything went tomorrow.

[chris]

I do try to answer as quickly as possible though that is not always possible

Let me know how this goes when you get a chance to make the changes.

Chris

[kostasf]

Sorry Chris but can you be more specific what css have to modify and what line ?

TIA

k

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

[chris]

Hi,

This is an old thread.

You don't need to modify css, you need to add it (then modify according to your requirements).
Have you followed through all the steps in the thread?

Chris

[kostasf]

Hi,

This is an old thread.

You don't need to modify css, you need to add it (then modify according to your requirements).
Have you followed through all the steps in the thread?

Chris

Sorry again but yes I followed through all the steps in the thread adding to ac-includes/js/mootools-cal-public.js everything you mention above. I am not an expert, so my question is where do I have to add all these:
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.

to make it work.
If you think you can help I will appreciate it otherwise thanx for your time

k

[chris]

You just need to add those lines "somewhere" in the calendar css file.
Bear in mind that that was just a sample, you would need to define the styles for each of the months that you want to have styled differently.
The css file can be found here:

Code: Select all

/calendar/ac-contents/themes/default/css/avail-calendar.css

One thing to bear in mind that the script now uses a separate css file for the admin version of the calendar so you will need to add the same styles to that file too. (it is within the ac-admin directory)

Let me know if you need any more help with this.

Chris

[kostasf]

Thanx Chris,
Your help was precious.

k