SharePoint Calendar JSON Conditional Formatting Not Working

Question

I have tested configuring conditional formatting on modern SharePoint calendars within 2 different tenants and have been unable to successfully apply conditional formatting. Is there a known issue and/or workaround to fixing this?

Answer 1

Sure thing. I am using 'Format the Current View' from a modern SharePoint calendar view. I have added multiple conditional formatting rules that should apply formatting. Screenshot below.

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/calendar-formatting.schema.json",
"additionalEventClass": {
"operator": ":",
"operands": [
{
"operator": ">",
"operands": [
{
"operator": "Date()",
"operands": [
{
"operator": "toDateString()",
"operands": [
{
"operator": "Date()",
"operands": [
"[$EventDate]"
]
}
]
}
]
},
{
"operator": "Date()",
"operands": [
{
"operator": "toDateString()",
"operands": [
{
"operator": "Date()",
"operands": [
"Mon Oct 31 2022"
]
}
]
}
]
}
]
},
"=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgGreen' , 'sp-css-backgroundColor-BgMintGreen sp-css-color-MintGreenFont')",
""
]
}
}

Answer 2

Hi @tdk1 ,
I tested it in my environment and the condition setting works fine.

But there is one question I want to confirm with you:
When creating a Calendar view, there are only two options for Start date and End date, namely Created and Modified. And this choice will be related to condition setting. as the picture shows.


So, I'm wondering how your start times come about, and the problem might have something to do with that.

Updated on December 1, 2022

{  
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/calendar-formatting.schema.json",  
  "additionalEventClass": {  
    "operator": ":",  
    "operands": [  
      {  
        "operator": ">",  
        "operands": [  
          {  
            "operator": "Date()",  
            "operands": [  
              {  
                "operator": "toDateString()",  
                "operands": [  
                  {  
                    "operator": "Date()",  
                    "operands": [  
                      "[$Created]"  
                    ]  
                  }  
                ]  
              }  
            ]  
          },  
          {  
            "operator": "Date()",  
            "operands": [  
              {  
                "operator": "toDateString()",  
                "operands": [  
                  {  
                    "operator": "Date()",  
                    "operands": [  
                      "Mon Oct 31 2022"  
                    ]  
                  }  
                ]  
              }  
            ]  
          }  
        ]  
      },  
      "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgGreen' , 'sp-css-backgroundColor-BgMintGreen sp-css-color-MintGreenFont')+' sp-field-fontSizeSmall'",  
      "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgGray' , 'sp-css-backgroundColor-BgLightGray sp-css-color-LightGrayFont')+' sp-field-fontSizeSmall'"  
    ]  
  }  
}  

I see that there is not much difference between my code and yours, so I suggest you create a new calendar view in a blank list to see if the problem still exists.

• 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.

Answer 3

Hmm, I cant replicate the same configuration. I've tried setting multiple conditions that should pass the test. I've had another developer confirm that his tenant is having the same issue. Can you send me the code you have when you click Advanced mode?