Change Background Color on Slot in Scheduler (Angular)

[Mike]

This should be pretty easy, in no way will I ever get this working without help ...

The control ...

 <kendo-scheduler  [slotClass]="getSlotClass" >

The code ....

    public getSlotClass = (args: SlotClassArgs) => {

        return {
            background:"purple" // ???????????????????????
          };
      }

Nothing I've tried can set the background color of a slot .... ?

[Slavena]

Hi Mike,

Thank you for the provided code snippets.

The function defined by the slotClass property of the Scheduler returns a value which is supported by ngClass (for example a key: value pair):

return {
   customClass: true
};

Here is an example that demonstrates this approach:

https://stackblitz.com/edit/angular-8eagpv?file=app/app.component.ts

In addition, the encapsulation mode should be set to ViewEncapsulation.None in order for the styles to be applied.

I hope this helps. Let me know if further assistance is required on this case.

Regards,
Slavena
Progress Telerik

[Mike]

Yes, that worked, the only issue I have now is that I would need to know what Resource I am in during getSlotClass() in order to color the backgrounds properly. My resources are doctors and the colors represent clinic's that they are during certain hours. I don't think there is anyway to have varying colors for slots on the same date for different resources.

It would be perfect if the resource was passed in as a property of SlotClassArgs.

Is it possible to determine the resource in getSlotClass() ??

[Slavena]

Hello Mike,

For further information on this topic please refer to the following private support thread as the discussion will be continued there:

https://www.telerik.com/account/support-tickets/view-ticket/1526896

Regards,
Slavena
Progress Telerik

[Pawan]

If i use the encapsulation then my other styling did not work. How fix this problem