Colorize Calls in Calendar based on custom fields

SuiteCRM Forum - English Language Developer Collaboration
1

Hello everyone,

we added two custom fields to our Calls Module, e.g. “priority” to determine the importance of the planned calls. What we are trying to do now is change the color of the calls in the calendar based on the priority so its easier to distinguish them.

What we found out so far is that its possible to implement such changes in modules/calendar/Cal.js. There we tested the following code:

 if (element.module_name == "Calls") {
            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';
            }
        }

The code works fine and changes the color of the calls in the calendar based on their status. What we haven’t been able to figure out yet, though, is how to access our new variables in this context. Simply changing “element.status” to “element.priority” will not do it. It seems like “element” is populated somewhere to contain certain modules and variables, but so far we couldn’t figure out how or where that is done.

Any help with this would be much appreciated!

Regards,
Daniel

2

You might want to have a look at this,

https://github.com/salesagility/SuiteCRM/issues/3273

and the associated PR:

https://github.com/salesagility/SuiteCRM/pull/3337

3

Very impressed pgr remembered the calendar colours issue from way back when.

This thread details a possible solution, which currently still works in 7.8.xx (the LTS versions). I have not tested against the rapid development versions. (7.9.xx and 7.10.xx)

4

First of all, thank you for your replies to my question.
Unfortunately, we had already come upon these topics ourselves, but were still not quite able to make it work. We could colorize the calls based on values of existing fields (e.g. “status”), but not based on our new custom fields.

What we finally did to make our custom fields accessible in modules/calendar/Cal.js was make some changes in include/utils/activity_utils.php.
Here we replaced

$select = "SELECT {$bean->table_name}.* from {$bean->rel_users_table},{$bean->table_name} ";

with

$select = "SELECT {$bean->table_name}.*,{$bean->get_custom_table_name()}.* from {$bean->rel_users_table},{$bean->table_name},{$bean->get_custom_table_name()} ";

Our code in the Cal.js looks like this:

if (element.module_name == "Calls") {
        if (element.status == "Planned"){
          valueToPush["borderColor"] = '#ff0001';
          valueToPush["textColor"] = '#000000';
          valueToPush["text-shadow"] = '0 0 50px white';
         // console.log(element.name +" "+ element.priority_c);
          if (element.priority_c == '' && element.flag_fix_c == 0) valueToPush["backgroundColor"] = '#ebbcbc';
          if (element.priority_c == 1) valueToPush["backgroundColor"] = '#a30a00';
          if (element.priority_c == 2) valueToPush["backgroundColor"] = '#e35a55';
          if (element.priority_c == 3) valueToPush["backgroundColor"] = '#ffb5b5';
          if (element.flag_fix_c == 1) valueToPush["backgroundColor"] = '#ff1800';

Thanks again for the help, topic can be closed.

1 Like
5

Hello,

I have tried to implement colors based on calls status. I have pasted this at Clas,js:

if (element.module_name == “Calls”) {
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’;
}
}

Have done a quick repair and rebuid and have repaired js files, but doen´t work. Do i need to do anything else?

Where (what line or before or after what?) do i have to paste code at Cal.js ?

Thanks a lot
Versión 7.10.9
Sugar Versión 6.5.25 (Compilación 344)

6

Anyone here with a solution? Will be highly interesting for me.

7

@sma
Look at the post: