Different colors for different months.

Help with installation and general calendar setttings

Different colors for different months.

Postby Jasonbiggs » Fri Apr 16, 2010 4:58 pm

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?
Jasonbiggs
 
Posts: 2
Joined: Fri Apr 16, 2010 4:22 pm

Re: Different colors for different months.

Postby chris » Fri Apr 16, 2010 8:17 pm

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
User avatar
chris
Site Admin
 
Posts: 1089
Joined: Mon Dec 17, 2007 7:42 pm
Location: Málaga, Spain

Re: Different colors for different months.

Postby chris » Sat Apr 17, 2010 11:35 am

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
User avatar
chris
Site Admin
 
Posts: 1089
Joined: Mon Dec 17, 2007 7:42 pm
Location: Málaga, Spain

Re: Different colors for different months.

Postby Jasonbiggs » Tue Apr 20, 2010 9:46 pm

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.
Jasonbiggs
 
Posts: 2
Joined: Fri Apr 16, 2010 4:22 pm

Re: Different colors for different months.

Postby chris » Wed Apr 21, 2010 9:59 pm

:D
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
User avatar
chris
Site Admin
 
Posts: 1089
Joined: Mon Dec 17, 2007 7:42 pm
Location: Málaga, Spain

Re: Different colors for different months.

Postby kostasf » Thu Mar 10, 2011 6:45 pm

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
kostasf
 
Posts: 4
Joined: Fri Feb 25, 2011 2:11 am

Re: Different colors for different months.

Postby chris » Thu Mar 10, 2011 7:13 pm

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
User avatar
chris
Site Admin
 
Posts: 1089
Joined: Mon Dec 17, 2007 7:42 pm
Location: Málaga, Spain

Re: Different colors for different months.

Postby kostasf » Thu Mar 10, 2011 9:58 pm

chris wrote: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
kostasf
 
Posts: 4
Joined: Fri Feb 25, 2011 2:11 am

Re: Different colors for different months.

Postby chris » Thu Mar 10, 2011 10:18 pm

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
User avatar
chris
Site Admin
 
Posts: 1089
Joined: Mon Dec 17, 2007 7:42 pm
Location: Málaga, Spain

Re: Different colors for different months.

Postby kostasf » Thu Mar 10, 2011 10:49 pm

Thanx Chris,
Your help was precious.

k
kostasf
 
Posts: 4
Joined: Fri Feb 25, 2011 2:11 am


Return to Support

Who is online

Users browsing this forum: No registered users and 1 guest

cron