Change color of slots (cells) ?? Per resource

Question

Is there anyway to set the color of the slot per cell, here is an example using another product, notice the clinic's on this sample:

https://codepen.io/MagenicMike/pen/gOWrvEq?editors=0010

Our resources are Clinicians and the times the times they are in various clinics are shown on the calendar in different colors .

Vinitha Devi Murugan · Answer

Hi Michael, 
 
Greetings from Syncfusion Support. 
 
We can set the different color to the slot based on different resources by making use of renderCell event of our scheduler. You can also customize the each resource header and date header using renderCell event based on element type, groupIndex and date attributes. 
 
Sample:  https://stackblitz.com/edit/differnt-slot-color-for-different-resources-zn8s4d?file=app.component.css  
API Link: https://ej2.syncfusion.com/angular/documentation/api/schedule/#rendercell  
 
onRenderCell(args: RenderCellEventArgs): void { 
    if (args.element.classList.contains('e-work-hours') || args.element.classList.contains('e-work-cells')) { 
      addClass( 
        [args.element], 
        ['willsmith', 'alice', 'robson'][parseInt(args.element.getAttribute('data-group-index'), 10)]); 
    } 
    if (args.elementType == 'resourceHeader') { 
      // Here you can add the different color to different resource header based on group index 
      console.log(args.groupIndex); 
    } 
    if (args.elementType == 'dateHeader') { 
      // Here you can add the different color to different date header based on date 
      console.log(args.date); 
    } 
  } 
 
Related Links: 
Online sample: https://ej2.syncfusion.com/angular/demos/#/material/schedule/group-custom-work-days  
UG Link: https://ej2.syncfusion.com/angular/documentation/schedule/cell-customization/#customizing-cells-in-all-the-views  
 
Kindly try with the above sample and get back to us if you need any further assistance 
 
Regards, 
Vinitha