Defining and using different colors in the Calendar for different types of entries

👨‍💻 Development Help
1

Hi
I used to be able to have more colors for each type of calendar entry (not person but tasks, held, planned, more) in the Calendar (until version 7.5X) by doing the following:

In CalendayDisplay I did (I am leaving out many of my entries, I am just showing two)

       
    public $activity_colors = array(
                'Meetings' => array(
                        'border' => '#1C5FBD',
                        'body' => '#D2E5FC',
                ),
                'Calls' => array(
                        'border' => '#DE4040',
                        'body' => '#FCDCDC',
                ),
                'Tasks' => array(
                        'border' => '#015900',
                        'body' => '#B1F5AE',
                ),
    // JOBST Added next several lines for meeting status color
    'Planned' => array(
      // light blue
        'border' => '#CCCCCC',
        'body'   => '#D8EFFF',
        ),
    'Held' => array(
      // slightly darker than above
        'border' => '#000000',
        'body'   => '#CCE6FF',
        ),
}

and then in Cal.js I replaced this


  el.style.backgroundColor = CAL.activity_colors[item.module_name]['body'];
  el.style.borderColor = CAL.activity_colors[item.module_name]['border'];

with this:


if (item.module_name =="Meetings") {
   el.style.backgroundColor = CAL.activity_colors[item.status]['body'];
   el.style.borderColor     = CAL.activity_colors[item.status]['border'];
}
else {
    // The next 2 lines are the orignial Cal.js code.
    el.style.backgroundColor = CAL.activity_colors[item.module_name]['body'];
    el.style.borderColor     = CAL.activity_colors[item.module_name]['border'];
}

I cannot figure out how to do this in Sugar 7.8.2 as the calendar has changed and the JS code is now broken into many files.

Please give me some ideas

thanks
Jobst

2

The most easy way is to use google calendar:
https://www.integromat.com/en/integrations/google-calendar/suitecrm7

3

The calendar settings
SUITECRM/clientis/index.php?module=Calendar&action=index&parentTab=All
is already permitting to use different colors for:
MEETINGS, CALLS, TASKS, EVENTS and it permit to change BODY, BVORDER and TEXT for eachone of them.

4

Not sure if this is still relevant to you, but here’s my solution.
I have also found that I have to edit the .JS file directly, as it did not read the updated information from the .php file for some reason (which is how you’re doing it above).

  1. unminify the JS (couldn’t do it using a simple vim macro for some reason. unminify.com however does the trick)
  2. search for backgroundColor to identify where the colors are set (There are 2 locations; We want the one where element.module_name is set) (This is around line 860 in the unminified file)
  3. Add Javascript to suit; for example:
    if (element.module_name == “Tasks”) {
    if (element.status == “Completed”){
    valueToPush[“backgroundColor”] = ‘#0000FF’;
    valueToPush[“borderColor”] = ‘#FFFFFF’;
    valueToPush[“textColor”] = ‘#000000’;
    }else if (element.status == “Booked”){
    valueToPush[“backgroundColor”] = ‘#00FF00’;
    valueToPush[“borderColor”] = ‘#000000’;
    valueToPush[“textColor”] = ‘#000000’;
    }else{
    valueToPush[“backgroundColor”] = ‘#FF0000’;
    valueToPush[“borderColor”] = ‘#FFFFFF’;
    valueToPush[“textColor”] = ‘#000000’;
    }
    }
    Obviously, this solution is not upgrade safe. It may also stop working at some point in the future even as a manual process.
    I have it working with 7.7.6, and the JS looks the same for 7.8.2, but haven’t tested it yet.

If anyone else has a better setup and/or an upgrade safe solution, i’d love to see it…

Cheers,

Serg

5

Just posted two pull request (my code suggestions) for this one: https://github.com/salesagility/SuiteCRM/issues/3273
I will think about this to add tasks and calls.

1 Like
6

Looks good.
If it gets accepted it would deeply add value to the calendar customization since it would allow color management for any number of Task/Meeting based on ‘status’. Could even be considered major enhancement :wink:

7

Anybody have any idea why this isn’t working for me? I am using SuiteCRM 7.7.9.
I’ve updated these 2 files:

Cal.js
https://github.com/jobst/SuiteCRM/commit/4819b2d452036f11b6e1c367002c3c4513e41b40

CalendarDisplay.php
https://github.com/jobst/SuiteCRM/commit/3a50fe7761dcd0ea7445f00f2457ed49efe00094

And added this to my config_override.php


$sugar_config['CalendarColors']['Planned']['border']="555555";
$sugar_config['CalendarColors']['Planned']['body']  ="D8EFFF";
$sugar_config['CalendarColors']['Planned']['text']  ="000000";
$sugar_config['CalendarColors']['Planned']['meeting_status_dom_entry_only']  =true;

But the color for Planned still does not change. I see the new option in my settings but with no title:

Any help would be greatly appreciated.

8

If anyone else runs into an issue with this, I wasn’t able to get this working using the github changes by jobst, but I followed sergtech suggestion of updating /Modules/Calendar/Cal.js and it works great.


if (element.module_name == "Meetings") {
if (element.status == "Planned"){
valueToPush["backgroundColor"] = '#0000FF';
valueToPush["borderColor"] = '#FFFFFF';
valueToPush["textColor"] = '#000000';
}else if (element.status == "Held"){
valueToPush["backgroundColor"] = '#00FF00';
valueToPush["borderColor"] = '#000000';
valueToPush["textColor"] = '#000000';
}else{
valueToPush["backgroundColor"] = '#FF0000';
valueToPush["borderColor"] = '#FFFFFF';
valueToPush["textColor"] = '#000000';
}
}

Thanks.