Is it possible to format a calendar view of a list in modern, with hex codes instead of the sp-css colours?

Question

I'm trying to format a calendar view of a list (generated from the event itinerary template) using custom hex code colours instead of the sp-css colours. I've used the hex codes successfully in the list view column formatting but just can't get it to work in the calendar view. I want the colour coding to match in both the list view column and the calendar view.

Here's the JSON generated by the calendar view formatting designer:

Rule 1: Show all items as yellow

Rule 2: If category column (Eventtype) is equal to 'SRF', show as blue

If I wanted to swap the sp-css-backgroundColor-BgCornflowerBlue to hex code #1C46C0 instead - any ideas how to do this please? It's stumped Copilot as well.

Thanks in advance.

{

"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",

"additionalEventClass": {

"operator": ":",

"operands": [

{

"operator": "==",

"operands": [

"[$Eventtype]",

"SRF"

]

},

"=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgBlue' , 'sp-css-backgroundColor-BgCornflowerBlue sp-css-color-CornflowerBlueFont')+' sp-field-fontSizeSmall'",

"=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgBrown' , 'sp-css-backgroundColor-BgGold sp-css-color-GoldFont')"

]

}

}

Answer 1

Per my research, it is not possible to format a calendar view with color hex codes.

JSON formatting capabilities are very limited for calendar view. You can only add additional classes to events using additionalEventClass and additionalEventClass only supports the naming conventions: ms-[location]-[color].

Reference:

https://devblogs.microsoft.com/microsoft365dev/mvp-article-using-theme-colors-in-list-formatting/

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.