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 :
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.