Calendar widget - setting colors

Calendar widget - setting colors

  

Hi,

i was using the calendar widget and came upon specific need. The calendar works perfectly and what i would like to achieve is the same that happens for the selected date or current date, in which a colored circle appears above the date.

i get a list of dates, and those dates must be circled with some color in the calendar. Really just adding that visual queue to the user that there's something important about that specific date. Is there any way to achieve this and if so, can you give me some pointers as to what to look for?

in the case of there being a better way, maybe through the use of a different widget even, to achieve the desired functionality i'm open to suggestions as well.


Thanks in advance and Best regards,

Bruno Gonçalves




So far i'm thinking JavaScript might be the way. I guess i can check the dates and inject a specific class into the day that i want. that being said, the days itself only differenciate from one another by the tag "data-pika-day" so maybe, and since i'm working only on a month to month basis, i could check for that specific attribute and inject a new class?

i will try this approach until i get feedback, meanwhile if i get it working i will post a solution.

Forgot to come back and leave here that the calendar widget takes an event list which already does this in a good way.
Would like to know now the best way to paint the color different based on the date. let's say the date has a type (in a separate list) and that type should define the color of the circle that appears on that date. 


so for the CSS class: 

SyntaxEditor Code Snippet

.has-event .pika-button:after

can i add a .f .has-event .pika-button:after whose sole purpose is to overwrite the color and then inject that class into the calendar?

Thanks in advance and Best regards,

Bruno Gonçalves