SugarCRM 7 Hide Completed Activities in Calendar

Early on when my company started with SugarCRM CE there was no option to hide completed activities in the Calendar so I followed this tutorial to change Calls/Meetings with status = Held and Tasks with status = Complete to background color = white. A later upgrade, I beleive 6.5.13, made this unnecessary with an added checkbox for hiding these items.

This worked well on our instance because we controlled the upgrades and I knew to update the files because the tutorial is not upgrade safe. We recently upgraded from SugarCRM CE 6.5.xx to Enterprise 7.6.  During our launch week I realized that the hide completed activities setting no longer existed. Additionally, we are on an On-Demand environment so the upgrades are controlled by SugarCRM so I wanted a different way.

Doing an inspect element in Chrome I noticed the div of an item, a Task in this case,  on the Calendar had this format:

 <div id="c51fbfab-5017-a40e-c307-55ef7dccc23b" class="act_item task_item" record="c51fbfab-5017-a40e-c307-55ef7dccc23b" module_name="Tasks" status="Not Started" detail="1" edit="1" duration_coef="1" style="border-color: rgb(1, 89, 0); height: 14px; top: -1px; left: -2px; width: 46%; background-color: rgb(177, 245, 174);"><div class="head"><div class="adicon" id="div_c51fbfab-5017-a40e-c307-55ef7dccc23b"></div><div>Expenses Update</div></div><div class="content" style="display: none;">Not Started</div><div class="content" style="display: none;"></div></div> 

Attempt 1 – Failed:

Noticing the ‘status’ attribute in the div this seemed like a pretty straight forward issue perhaps with some jQuery like:

 
 $('div[status="Held"]').css('display', 'none');
 

would do the trick but the activities weren’t affected. Just modifying a general <div> worked but not with referencing the status attribute.

Attempt 2 – Failed:

Next I tried adding some css by creating a file /custom/themes/custom.less with:

 
 div[status="Held"], div[status="Completed"] {
 display: none;
 }

I saw the file in the browser editor with the syntax I wanted but still nothing was happening. I changed the file to:

 
 div {
 background-color: red;
 }
 

This only changed the navigation bar and the footer to have background color of red. I don’t know why this was the case. Perhaps the order of page load?

Attempt 3 – Success: 

I knew the css worked as I had tested it in the editor. So I used a after_ui_footer global logic hook to include the css file when on the Calender page.

/custom/modules/logic_hooks.php

if (!defined('sugarEntry') || !sugarEntry) die('Not A Valid Entry Point');
class CalendarLogic
 {
 function displayCalendarCss ($event, $arguments)
 {if (!isset($_REQUEST["to_pdf"]) && $_REQUEST['module'] == 'Calendar') {echo 'link rel="stylesheet" href="custom/modules/Calendar/Cal.css"/';}}
 }

Please note the opending < and closing > for the link tags were removed in this post.

Finally

/custom/modules/Calendar/Cal.css:

div[status="Held"], div[status="Completed"] {
 display: none;
}

This worked in testing but it took me a bit to get this packaged properly for testing but I finally got it.

Download the package below.

Hide Completed Activities Calendar Package

Perhaps a better way would be to override the calendar get activities to prevent the completed tasks from being included in the first place but I wasn’t having any luck overriding the base calendar functions.