Scheduler appointment color

[gotik911]

Hello everyone!

I'm using Scheduler to show two different types of appointments and I want to show them in different colors.

I can change the background color for a specific type of the appointment as you can see on the screenshot by using:

args.Attributes["style"] = "background-color: #ead7db";

in the SlotRender event.

Is it possible to change the background color of the appointment circle (from blue to red) by setting style to the nested div using similar approach as I used for parent div background?

[korchev]

Hi @gotik911,

You can do it like this:

1. Set a custom class as well

   args.Attributes["class"] = "my-class";
   

2. Use it to set the backround of rz-slot-title via CSS (add this to your CSS file).

   .my-class > .rz-slot-title {
      background-color: red; 
   }
   

[gotik911]

Hi @korchev,

Thank you for the response.

I did it like you told me but the color is not changed.

Is it possible to programmatically apply style only to the nested div like in the example:

I know how to do this with the slot background (for specific date and appointment type)

args.Attributes["style"] = "background-color: red";

, but I would like to change the circle color only (like in the second screen shot) and that requires, I think, applying the style to the nested div.

Thank you so much for the help!

[korchev]

You can try adding !important:

.my-class .rz-slot-title {
   background-color: red !important;
}

@gotik911

Is it possible to programmatically apply style only to the nested div like in the example:

Not from code. You have to use my suggestion.

[gotik911]

@korchev ,

Thank you so much. The !important did the job!

You are a wizard!