Unable to use color formatting in modern SharePoint Calendar

Nidhi Kumari 20 Reputation points
2024-01-16T11:08:58.6033333+00:00

Hi,

With the current modern SharePoint calendar, I am able to get color formatting for Rows in list view and for columns as well but, I am unable to get color formatting for Calendar view. Even though I am using Conditional Formatting. User's image

I tried changing in advance mode as well.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "additionalEventClass": {
    "operator": ":",
    "operands": [
      {
        "operator": "==",
        "operands": [
          "[$Category]",
          "Meeting"
        ]
      },
      "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgGreen' , 'sp-css-backgroundColor-BgMintGreen sp-css-color-MintGreenFont')",
      {
        "operator": ":",
        "operands": [
          {
            "operator": "==",
            "operands": [
              "[$Category]",
              "Work hours"
            ]
          },
          "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgBrown' , 'sp-css-backgroundColor-BgGold sp-css-color-GoldFont')",
          {
            "operator": ":",
            "operands": [
              {
                "operator": "==",
                "operands": [
                  "[$Category]",
                  "Business"
                ]
              },
              "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgDarkBlue' , 'sp-css-backgroundColor-BgLightBlue sp-css-color-LightBlueFont')+' sp-field-fontSizeSmall'",
              ""
            ]
          }
        ]
      }
    ]
  }
}
SharePoint
SharePoint
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
10,151 questions
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.
2,783 questions
SharePoint Workflow
SharePoint Workflow
SharePoint: A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.Workflow: An orchestrated and repeatable pattern of business activity, enabling data transformation, service provision, and information retrieval.
545 questions
Accepted answer
  1. Emily Du-MSFT 43,511 Reputation points Microsoft Vendor
    2024-01-23T09:58:14.8333333+00:00

    Sorry for that I did not consider the situation of event list and introduced confusion.

    I created a classic calendar list, then I converted it into a modern list. After that, I created a modern calendar view and add JSON codes for the modern calendar view. The same issue as yours.

    I did lots of research, there is no official documentation to mention this issue.

    And in my opinion, due to it was converted by classic calendar list, so JSON codes do not work on it.

    I suggest you open a service request with Microsoft to get more detailed background information.

    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.

1 additional answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Emily Du-MSFT 43,511 Reputation points Microsoft Vendor
    2024-01-17T03:18:12.84+00:00

    I cannot reproduce this issue in my calendar view, here are my list and JSON codes for your reference.

    1.List view.

    User's image

    2.Calendar view

    enter image description here

    enter image description here

    3.JSON codes. Note: You should choose Month view.

    enter image description here

    enter image description here

    {
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "additionalEventClass": {
    "operator": ":",
    "operands": [
      {
        "operator": "==",
        "operands": [
          "[$Category]",
          "Meeting"
        ]
      },
      "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgGreen' , 'sp-css-backgroundColor-BgMintGreen sp-css-color-MintGreenFont')+' sp-field-fontSizeSmall'",
      {
        "operator": ":",
        "operands": [
          {
            "operator": "==",
            "operands": [
              "[$Category]",
              "Work hours"
            ]
          },
          "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgBrown' , 'sp-css-backgroundColor-BgGold sp-css-color-GoldFont')+' sp-field-fontSizeSmall'",
          {
            "operator": ":",
            "operands": [
              {
                "operator": "==",
                "operands": [
                  "[$Category]",
                  "Business"
                ]
              },
              "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgDarkBlue' , 'sp-css-backgroundColor-BgLightBlue sp-css-color-LightBlueFont')+' sp-field-fontSizeSmall'",
              ""
            ]
          }
        ]
      }
    ]
  }
}

    4.Result.

    enter image description here

    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.