Hello,

When using the Calendar Pattern for mobile, (https://success.outsystems.com/Documentation/SILK_UI_Framework/03_Building_UI_Through_Pattern_Composition/Using_Silk_UI_Patterns/Calendar_Pattern). 

How can I choose the colors of the balls by "priority" or "type of event"?

Thanks

Solution

Hi Mariana,

It is not possible to do that natively. You can still do it, but it could be tricky :)

Basically, you need to define the different style classes that you will apply to the pattern in the theme of your application. After that, you need to apply those classes to the pattern according to the "priority" or "type of event" (passing the class in the extended properties).


For instance, let's say that in the base theme, your pattern is defined like:

.Class1 .Class2 { background-color: blue;}


In your application theme, you should define something like:

.Class1 .Priority1 .Class2 {background-color: green;}

.Class1 .Priority2 .Class2 {backgroundcolor: yellow;}

.Class1 .Priority3 .Class2 {backgroundcolor: red;}


Then, you need to apply the classes Priority1, Priority2 or Priority3 in the extended properties, according to the priority (using an if statement in an expression).


Hope it helps.


Rui Barradas

Solution

Use the CSS extended properties to write the custom class for each priority, which will overwrite the base theme classes.