Best Answer

CSS to change Calendar Colors

  • 19 April 2022
  • 5 replies
  • 428 views
Brody40
Rank
Userlevel 1
Badge

Hello I’m currently trying to change the colors of different events on the Calendar using CSS and I’m so close but missing something. My idea was using position selectors to manually color code each event. 

 

Currently my code is:

.docebo-calendar .pos-1 {

    background-color: red !important; 

}

This changes the first event of each day to red. If there was a way i could isolate it to a certain day. For example April 20th, pos-1 then i would be able to color code the entire calendar. Whenever I try to specify with row and column indicators it doesn’t change anything. It either lets me change all of row 1 or all of column 1, but not column 1, row 1 together. 

If there are any CSS experts out there, help would be much appreciated! 

icon

Best answer by Bfarkas 19 April 2022, 22:51

View original
Brody Volpe

5 replies

Bfarkas
Rank
Userlevel 7
Badge +3

I’m just curious, is your plan to redo this design every month using this method? There’s not a way to identify by day, and the days will shift over different monthly patterns.

We do this using a custom a calendar that is iframed into a custom page and runs off of a csv file of data that is refreshed from Docebo hourly, but that was a huge custom build and you lose the individuality of it.

Brody40
Rank
Userlevel 1
Badge

@Bfarkas That was the plan. We have about 20-25 live events a month so it would take me little to no time to adjust the position code to match what i needed it to be. It also helps because for the most part, our events are repeated every month and on the same days of the week so it’d be easy to distinguish which positions would need to be which color. 

 

Oh I see. I was looking for the most straightforward way to go about this, just so if anyone took over updating the calendar, it’d be as simple as changing position numbers. My wheelhouse is also not in coding, i actually just finished my first CSS course which why i at least know how to change groups of the calendar. The using the Refresh is a great way to update the calendar, i just dont think we have the IT resources to create an Iframed custom page or i definitely would look into it! Maybe after some more classes!

Brody Volpe
Bfarkas
Rank
Userlevel 7
Badge +3

Alright, well, that sounds painful, but if you want to do it, here’s how to select them by box:

.cal-event-row-5.cal-event-col-4.pos-1 {
background-color: #ff0000 !important; 
}

The .cal-event-row-5 selects the row of the calendar grid, the .cal-event-col-4 selects the column(day of week) of the cell, the .pos-1 was just because you had that previously and selects the first event in the cell, if you don’t need that, then just remove it.

Now, lots of disclaimers here as this is a very precarious setup:

  • Distinguishing meaning with color only is not a great method for accessibility purposes, if the intent is to convey meaning other methods should be considered that work for everyone.
  • This will be very manual every month, and you won’t be able to control multiple months at the same time, so transition time/end/beginning of the month will be tricky doing it this way.
  • This will impact all calendar pages as written, if doing a custom calendar widget for specific events, make sure to wrap it all in the unique page ID for that calendar to keep it unique to just that one.
  • This will only work on the monthly view, would need to modify all events for the week and agenda views separately.
Brody40
Rank
Userlevel 1
Badge

@Bfarkas Thanks for taking the time. I see where my mistake was for my column-row setup now.

Thanks again!

Brody Volpe
G

@Brody40 I just popped into Community to look for this exact same question. Would it be possible for you to share the CSS you created and a screenshot of how it looked like? 

Reply


Terms & ConditionsCookie settings