Is there a way to edit the Course Catalog Widget Calendar?

Glad that worked out.

I think things get a bit more tricky if you want to have multiple colors going on.
I didn’t have any events at all in my calendar so I had to make one to poke around with so now I have only one. I am only a month into my onboarding at this point. So I got a lot of bare bones, so to speak.

Do you currently have more than one color for various event types?

If you do, it would suggest that maybe it is possible.

I am more of a JavaScript guy who would have tried figuring something out with some conditional statements - but alas - that is not a tool available to me in Docebo.

I am not aware of a way to perform a check for specific text using CSS.

Perhaps there is a CSS expert who can help carry you further along with that one.

@gstager I see! Yeah currently all of my events, no matter what type they are, are all a singular color. However, I do enjoy the red more than the purple so I appreciate you helping out with that!

Thanks very much for this post @Brody40 and to @gstager for coming to the rescue.
I’ve tried implementing this change on our CSS, but I noticed a couple of odd things.

This is what the colours looked like originally in the Monthly View (wanted to move away from the purple too):

When I implemented the CSS it became this:

Don’t pay too much attention to the nasty green - it was just a test.  But notice that the “1 more events...” link at the bottom is also coloured here but not in the original.

Also - when I switched to the Weekly view:

The purple is still there - grrrrr!

I tried playing around a bit with the CSS code to see if I could get it to change, but to no avail.

Does anyone have any suggestions as to what I need to do to get the colours the same in the Month and Week view and to not colour the ‘more events’ link in the Month view?

Thanks very much

Sean

@gstager 

You are a miracle worker - Yes, yes YES!

It really looks fabulous on both the monthly and weekly views now. 

I’m not entirely sure how you get the codes for the elements that need changing, but it’s really amazing!  Here’s the month and week view now:

I’m not noticing that pesky purple dot that remains on the week day headings, I can live with that. 

We went for a charcoal colour with white text in the end - looks better than the green :-D

Thanks so much again for your help - very pleased!

Sean

/** Change the color of the little dot on weekly view **/

.cal-event-balloon {
    background-color: rgb(191, 220, 247) !important;
}

@gstager

Ha ha ha!  You clearly love a challenge eh!

Well done - success again :-)

All looking neat and matching now.

Thanks so much for your help - will try not to bother you for a bit now!

Cheers

Sean

That’s brilliant. Thanks so much for providing.

Additionally, does anybody know if it’s possible to define the color per course? We have courses for different regions all over the planet so it would help a lot if we could easily visually identify where the course will be held. I can see the course detail is there, I’m just not sure how to target the element based on the course.

Hi @JenWalsh. I’m probably not the best person to help here, but the only way I found to resolve this was to change the color of the whole thing, including the ‘more events’, instead of just the first two rows.

/** Change Color of Calendar Event Tag **/
/** Monthly View **/
.docebo-calendar .cal-month-view .cal-days-events .cal-event {
    background-color: rgb(109, 203, 209) !important;
    color: #000000 !important;
}

Let me know if you’re still stuck. I have a bunch of other calendar settings from different community chats that I’m using, but I’m pretty sure that’s the only one that affects what you’re looking at.