Colour Coding on Calendar - Different colours for record type

Hello Guys

We have been looking into colourising the calendar

Using the forums to get us to - http://developer.sugarcrm.com/2012/07/31/colorizing-the-calendar/

We have now got to a point where we have our status colour coded

  • Planned = Blue
  • Held = Green
  • Not held = Red

The next hurdle we are trying to overcome is a different border colour depending on type of record (Call, Meeting or Task)

This is edited code from modules/Calendar/CalendarDisplay.php


The below code adds an extra dimension into the $activity_colors array stored in /modules/Calendar/CalendarDisplay.php

class CalendarDisplay {

            /**

            * colors of items on calendar

            */

            public $activity_colors = array(

                            'Meetings' => array(

                                            'Planned' => array(

                                                            'border' => '#5F5',

                                                            'body'   => '#5F5',

                                            ),

                                            'Held' => array(

                                                            'border' => '#55a',

                                                            'body'   => '#55a',

                                            ),

                                            'Not Held' => array(

                                                            'border' => '#a55',

                                                            'body'   => '#a55',

                                            ),

                            ),

                            'Calls' => array(

                                            'Planned' => array(

                                                            'border' => '#006f00',

                                                            'body'   => '#3A3',

                                            ),

                                            'Held' => array(

                                                            'border' => '#00006F',

                                                            'body'   => '#33A',

                                            ),

                                            'Not Held' => array(

                                                            'border' => '#6F0000',

                                                            'body'   => '#A00',

                                            ),

                            ),

                            'Tasks' => array(

                                            'Planned' => array(

                                                            'border' => '#000',

                                                            'body'   => '#5F0',

                                            ),

                                            'Held' => array(

                                                            'border' => '#000',

                                                            'body'   => '#55F',

                                            ),

                                            'Not Held' => array(

                                                            'border' => '#000',

                                                            'body'   => '#F55',

                                            ),

                            ),

            );

Dimensions as follows:

0 whole array

1 Item type

2 Item status

3 Border + body colors

the original code would be as follows

Dimensions as follows:

0 whole array

1 Item type

2 Border + body colors

The code I edited in Cal.js

Original:

el.style.backgroundColor = CAL.activity_colors[item.module_name][‘body’];

el.style.borderColor = CAL.activity_colors[item.module_name][‘border’];

edited:

el.style.backgroundColor = CAL.activity_colors[item.module_name][item.status][‘body’];

el.style.borderColor = CAL.activity_colors[item.module_name][item.status][‘border’];

The above code is from a function which is responsible for creating the items in the calendar

Specifically these lines are for adding colour styling to the item being created

error from Chrome Developer tools:

Uncaught TypeError: Cannot read property ‘body’ of undefined

I expect that a change needs to be made elsewhere which pulls across the arrays from php to javascript and it is most likely expecting a 3 tier array and not the custom 4 tier array that I made

Thanks for the contribution Taufique and I hope you overcome the other hurdles to refine your solution!