Need to Display Calendar Event days with two different color in Mobile App

I have scenario  that I Need to highlight Calendar Event date with two different color. In calendar widget there is single CSS Class for an Event. when I try to customize it applied for the all the data in the list. 

Please help me out to achieve this task.

SyntaxEditor Code Snippet

.has-event .pika-button {
    background-color: #d80939 !important;
    color: #000 !important;
    background: linear-gradient( -90deg, #eceff1, # 49%, white 49%, white 51%, red 51% );
    box-shadow: inset 0px 0px 0px 3px white;
}

Hinduswari Muralitharan wrote:

I have scenario  that I Need to highlight Calendar Event date with two different color. In calendar widget there is single CSS Class for an Event. when I try to customize it applied for the all the data in the list. 

Please help me out to achieve this task.

SyntaxEditor Code Snippet

.has-event .pika-button {
    background-color: #d80939 !important;
    color: #000 !important;
    background: linear-gradient( -90deg, #eceff1, # 49%, white 49%, white 51%, red 51% );
    box-shadow: inset 0px 0px 0px 3px white;
}


Hello Hinduswari,


I was going over creating a screen to test it but found this on the project's github

https://github.com/Pikaday/Pikaday/pull/178

I believe it achieves what you're looking for. Can you give it a try and let us know?

Also a suggestion: When creating a post regarding a specific forge component, it's better to create it also on the "Support" tab of the component itself - https://www.outsystems.com/forge/component-discussions/1566/Calendar+Plugin - So the creator(s) are aware of it.

Hello Hinduswari,

Please try this it will work.

background:linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(237,10,19,1) 50%, rgb(255, 255, 255) 50%);

Jay Santos wrote:

Also a suggestion: When creating a post regarding a specific forge component, it's better to create it also on the "Support" tab of the component itself - https://www.outsystems.com/forge/component-discussions/1566/Calendar+Plugin - So the creator(s) are aware of it.

Hi Jay Santos,

Thanks for the suggestion. I tried java script unfortunately not working for me.

In my case , 

I passed a list of values to the calendar (Interaction\Calendar) event List and map the required date.

Using above CSS  I change the look of the event date.

Now I need to change some of the list value(event dates) in red color and remaining should be in green color based on  condition. But For calendar widget there is single class for Event(.has-event) and there is no extended property too.


Thanks,

Hindu.

Kavita wrote:

Hello Hinduswari,

Please try this it will work.

background:linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(237,10,19,1) 50%, rgb(255, 255, 255) 50%);

Hi Kavitha,

This code I have already use for event date. Need to change the event date color based on condition. I have no idea that where do I put condition for the even input list.


Thanks,

Hindu

Hello, 


Does anyone has a response for this post?

I'm trying to show different type of events with different colors.


Thank you!