Activity backgound color

Feedback
1

Hi I’m trying to give background color to activities in Pipedrive.

I’ve gotten pretty far but need some help with the final step.

I’ve installed a chrome plugin called “Custom Javascript for Websites 2” which allows me to run JS code on the pipedrive page.

I’ve created the following code to run on my calendar page:

$(document).ready(function() {
//timeout needed because activities are not loaded yet at .ready
setTimeout(function (){
var elements = document.getElementsByClassName(‘gridModel__container’);
for (var i = 0; i < elements.length; i++) {
if (elements[i].innerHTML.toLowerCase().indexOf(“offerte”) !=-1) {
elements[i].style.backgroundColor = ‘#026802’;
elements[i].style.color = ‘white’;
}
if (elements[i].innerHTML.toLowerCase().indexOf(“demo”) !=-1) {
elements[i].style.backgroundColor = ‘#026802’;
elements[i].style.color = ‘white’;
}
if (elements[i].innerHTML.toLowerCase().indexOf(“opvolging”) !=-1) {
elements[i].style.backgroundColor = ‘#fff100’;
}

}

}, 5000); // How long do you want the delay to be (in milliseconds)?
});

This works great when I load the page.
It creates a backgroundcolor for the needed activities within my current week

But if i switch to another week the JS doens’t run anymore (obviously).
Same problem when I come from another page (eg the deals page).

Is there any trigger I can set to run my JS when I switch between weeks?

Kr,
Nick

2

Hi Nick,

you are absolutely right - your script only runs once because the document only gets fully loaded once, in the very beginning, when you open the page. New activities appear in your calendar when you switch between the weeks - so I think it makes sense to bind your css updates to the “<”/">" (next/prev week) buttons click events.
You could also move your css updating functionality to a separate variable (function), so that it can be used more than once without copy-pasting the code.

var changeColorFunction = function() {
  setTimeout(function(){
    $( '.gridModel__container' ).css( "background-color", "red" ) // your stuff goes here
  }, 5000);
};

$(document).ready(function() {
  changeColorFunction();
  $(document).on('click', '.weekSwitch__previous, .weekSwitch__next', function() {
     changeColorFunction();
  });
 });

css changes need to be called 1+ times:

  1. on document ready, which you already have done
  2. on each week switch

Hope, my answer helps you, best luck :slight_smile:

2 Likes
3

Thx for the hint Grasscut, sorry to not reply sooner but didn’t see the notification…

I indeed figured that out too, and used this code for the next and prev week, but turns out i need to build in a lot more triggers because when you e.g. create a new activity, the colors disappear.

here my code for next and prev week.

$(’.button’).each(“click”, function(){
alert(“button”);
setcolors();
});