Schedule by Resource view - set background color of empty cells by resource

Question

Hi,

I'd like to add a faded background color to each resource per this demo: https://ej2.syncfusion.com/react/demos/?_ga=2.196639404.1097657449.1589007922-1465655929.1589007922#/material/schedule/group-custom-work-days

They seem to have done it with some hardcoded css.

Is there a way to do this from code in the Schedule?

Currently each user in my app has a color, which we use to colonize each event.

This would need to work for both Schedule and Schedule Timeline views.

Hareesh Balasubramanian · Answer

Hi Tony, 

Greetings from Syncfusion Support. 

We have validated your reported query “This would need to work for both Schedule and Schedule Timeline views” at our end. And for that, we have prepared a sample using dataBound and actionComplete events and the sample can be viewed from the following link. 

Code snippet: 




  customFunction() { 
    for (var j = 0; j < this.resourceData.length; j++) { 
      var verticalEleSmith = document.querySelectorAll('.e-work-hours.' + this.resourceData[j].text); 
      for (var i = 0; i < verticalEleSmith.length; i++) { 
        verticalEleSmith[i].style.backgroundColor = this.resourceData[j].backgroundColor; 
      } 
      var monthEleSmith = document.querySelectorAll('.e-work-days.' + this.resourceData[j].text); 
      for (var i = 0; i < monthEleSmith.length; i++) { 
        monthEleSmith[i].style.backgroundColor = this.resourceData[j].backgroundColor; 
      } 
    } 
  } 
  onActionComplete(args) { 
    if ((args.requestType == "dateNavigate") || (args.requestType == "viewNavigate")) { 
      this.customFunction(); 
    } 
  } 
  onDataBound() { 
    if (this.flag) { 
      this.customFunction(); 
      this.flag = false; 
    } 
  } 

Sample: https://stackblitz.com/edit/react-ehqwbf-9wzfbt?file=index.js 

Kindly try the above solution and revert us if you have any further assistance. 

Regards, 
Hareesh

Tony · Answer

I will try it out - seems to be using an older style of React code?

Vengatesh Maniraj · Answer

Hi Tony, 

Thanks for the update. 

We have provided the react sample with the new style of react code for the easiest customization. Kindly try out the shared sample and get back to us for further assistance. 

Regards, 
Vengatesh