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

SPOLNinja 0 Reputation points
2024-11-19T16:06:52.82+00:00

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')"

]

}

}

SharePoint Development
SharePoint Development
SharePoint: A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.Development: The process of researching, productizing, and refining new or existing technologies.
3,071 questions
{count} votes

1 answer

Sort by: Most helpful
  1. Emily Du-MSFT 47,626 Reputation points Microsoft Vendor
    2024-11-20T07:43:29.31+00:00

    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.


Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.