Colorizing The Calendar

sugarcrmdevelopers —  July 31, 2012

Editor’s Note: This blog post comes from a Sugar Community member, and talks about doing a simple customization to the Calendar recently updated in Sugar 6.4 to color the various events.

I recently had a client request of having the calendar display different colors based on the meeting status. I had no idea on what it would take to accomplish this. I knew of others who did this, but I still had no idea where to start, if it was difficult, and more importantly was it upgrade safe?

I narrowed it down to 2 files after searching text in files, browser inspections, and plenty of coffee.

In this blog entry you will learn what modifications are necessary to add color into you calendar.  The color will be based on the ” Meeting Status” field. You can base the colors on other fields as well as long as the fields are exposed to the calendar.

Step 1 – Add colors for the Meeting Status

Here are the Meeting Status from the drop down editor, please note we want to use the “Keys” not the values. In this case they happen to be the same.

Open up /modules/Calendar/CalendarDisplay.php and add a color for each of the statuses. It will be on the very top of the  file, right after the class declaration.

Step 2 – Looking up the meeting status color

Open up /modules/Calendar/Cal.js ……. the file will be minified, but most code editors have a format feature to “make it pretty”.

Look for the JS function: CAL.add_item_to_grid = function(item) This is the function where items are added to the calendar. Go down a little farther and look for el.style.backgroundColor :

Change the following:

To :

Summary:

As you can see it really is easy. Please know that it is not upgrade safe and might have to be done again if an upgrade changes any of the 2 files. Make sure you backup files before working on them as a safe precaution.

7 responses to Colorizing The Calendar

  1. 

    Is there any way to do this upgrade safe? I tried copying the files to the custom directory and then modifying them, but it did not work.

  2. 

    I cant make this work? Please help me so i dont get fired…. PLEASE.

  3. 

    This does not work!

  4. 

    Did you ever get this to work?

  5. 

    Can you please help me. This doesnt work!

Trackbacks and Pingbacks:

  1. rel to: Colorizing The Calendar - August 13, 2012

    […] to: Colorizing The Calendar Hello everyone, I've found interesting article: Colorizing The Calendar. It is good solution if you want to colorize only one Activity like Meetings or Calls, but it is no […]