Forum Discussion

sbontempo587's avatar
sbontempo587
Copper Contributor
Feb 28, 2023

SharePoint List Calendar View Conditional Formatting

Hi all,

 

I've been spinning my wheels on this one. I have created a calendar view from a SP list and want to color code calendar items based on the event type (field = "Event_Type"). They selection list is formatted as radio buttons. I've written the following JSON and input into the Advanced View under Conditional Formatting. I've tried everything I can think of to de-bug but it seems the code is correct? Yet it isn't working:

 

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
"additionalEventClass": {
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Event_Type]",
"Vacation/Out of Office"
]
},
"=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgRed' , 'sp-css-backgroundColor-BgDustRose sp-css-color-DustRoseFont')+' sp-field-fontSizeSmall'",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Event_Type]",
"Training"
]
},
"=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": [
"[$Event_Type]",
"Onboarding"
]
},
"=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": [
"[$Event_Type]",
"Holiday"
]
},
"=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgTeal' , 'sp-css-backgroundColor-BgCyan sp-css-color-CyanFont')+' sp-field-fontSizeSmall'",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Event_Type]",
"Meeting"
]
},
"=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgDarkPurple' , 'sp-css-backgroundColor-BgViolet sp-css-color-VioletFont')+' sp-field-fontSizeSmall'",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Event_Type]",
"Event"
]
},
"=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgBlue' , 'sp-css-backgroundColor-BgCornflowerBlue sp-css-color-CornflowerBlueFont')+' sp-field-fontSizeSmall'",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Event_Type]",
"Board"
]
},
"=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgGray' , 'sp-css-backgroundColor-BgLightGray sp-css-color-LightGrayFont')+' sp-field-fontSizeSmall'",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Event_Type]",
"Wellness"
]
},
"=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgDarkGreen' , 'sp-css-backgroundColor-BgSage sp-css-color-SageFont')+' sp-field-fontSizeSmall'",
""
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
}

  • sbontempo587's avatar
    sbontempo587
    Copper Contributor
    And curious - does anyone know if there's any way to eliminate the time from the event title when looking at the calendar? It's pulling the Start Time into the calendar view for each event, but we just want the Event Title to display.
    • ganeshsanap's avatar
      ganeshsanap
      MVP

      sbontempo587 Unfortunately, it is not supported to remove the time from event title shown in calendar view currently.

       

      SharePoint online list calendar view JSON formatting only supports adding additional CSS classes currently. It does not support more customization options using JSON formatting yet.


      Please consider giving Like if my post helped you in any way. For SharePoint/Power Platform blogs, visit: Ganesh Sanap Blogs

  • sbontempo587's avatar
    sbontempo587
    Copper Contributor
    Anyone ever see an issue where some people can see the conditional color formatting and others do not?
    • ganeshsanap's avatar
      ganeshsanap
      MVP

      sbontempo587 I haven't faced this issue. But, here are some things you can check:

      1. Make sure conditional view formatting JSON is saved properly
      2. Make sure all users are looking at same list view
      3. Ask users who are unable to see the conditional color formatting to clear browser cache/cookies (for all time) 

      Please consider giving a Like if my post helped you in any way. For SharePoint/Power Platform blogs, visit: Ganesh Sanap Blogs

  • sbontempo587 Make sure you are using below things correctly:

    1. Use correct internal name of your column in JSON: Find the internal name of SharePoint column 
    2. Column is shown/included in list view: Conditional Formatting in Calendar View is not showing a Column 

    Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

    For SharePoint/Power Platform blogs, visit: Ganesh Sanap Blogs

    • Edward_Chong's avatar
      Edward_Chong
      Copper Contributor

      ganeshsanap 

       

      I found that the default "Calendar View" that is created will not include any additional columns (i.e. custom event type) selected. You'll need to go to the List Settings and edit the calendar view using the classic view editor and include the conditional filter field. When you refresh the calendar view, it may popup with an error and you have to reconfigure the "Modern" settings, but then the conditional formatting will work. 

  • sbontempo587 try this:

    {
    "additionalEventClass": {
    "operator": ":",
    "operands": [
    {
    "operator": "==",
    "operands": [
    "[$Event_Type]",
    "Vacation/Out of Office"
    ]
    },
    "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgRed' , 'sp-css-backgroundColor-BgDustRose sp-css-color-DustRoseFont')+' sp-field-fontSizeSmall'",
    {
    "operator": ":",
    "operands": [
    {
    "operator": "==",
    "operands": [
    "[$Event_Type]",
    "Training"
    ]
    },
    "=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": [
    "[$Event_Type]",
    "Onboarding"
    ]
    },
    "=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": [
    "[$Event_Type]",
    "Holiday"
    ]
    },
    "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgTeal' , 'sp-css-backgroundColor-BgCyan sp-css-color-CyanFont')+' sp-field-fontSizeSmall'",
    {
    "operator": ":",
    "operands": [
    {
    "operator": "==",
    "operands": [
    "[$Event_Type]",
    "Meeting"
    ]
    },
    "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgDarkPurple' , 'sp-css-backgroundColor-BgViolet sp-css-color-VioletFont')+' sp-field-fontSizeSmall'",
    {
    "operator": ":",
    "operands": [
    {
    "operator": "==",
    "operands": [
    "[$Event_Type]",
    "Event"
    ]
    },
    "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgBlue' , 'sp-css-backgroundColor-BgCornflowerBlue sp-css-color-CornflowerBlueFont')+' sp-field-fontSizeSmall'",
    {
    "operator": ":",
    "operands": [
    {
    "operator": "==",
    "operands": [
    "[$Event_Type]",
    "Board"
    ]
    },
    "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgGray' , 'sp-css-backgroundColor-BgLightGray sp-css-color-LightGrayFont')+' sp-field-fontSizeSmall'",
    {
    "operator": ":",
    "operands": [
    {
    "operator": "==",
    "operands": [
    "[$Event_Type]",
    "Wellness"
    ]
    },
    "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgDarkGreen' , 'sp-css-backgroundColor-BgSage sp-css-color-SageFont')+' sp-field-fontSizeSmall'",
    ""
    ]
    }
    ]
    }
    ]
    }
    ]
    }
    ]
    }
    ]
    }
    ]
    }
    ]
    }
    }
     
     
    Which is more related 
     
    Or this one which I more like 
    {
    "additionalRowClass": {
    "operator": ":",
    "operands": [
    {
    "operator": "==",
    "operands": [
    "[$Event_Type]",
    "Vacation/Out of Office"
    ]
    },
    "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgRed' , 'sp-css-backgroundColor-BgDustRose sp-css-color-DustRoseFont')+' sp-field-fontSizeSmall'",
    {
    "operator": ":",
    "operands": [
    {
    "operator": "==",
    "operands": [
    "[$Event_Type]",
    "Training"
    ]
    },
    "=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": [
    "[$Event_Type]",
    "Onboarding"
    ]
    },
    "=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": [
    "[$Event_Type]",
    "Holiday"
    ]
    },
    "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgTeal' , 'sp-css-backgroundColor-BgCyan sp-css-color-CyanFont')+' sp-field-fontSizeSmall'",
    {
    "operator": ":",
    "operands": [
    {
    "operator": "==",
    "operands": [
    "[$Event_Type]",
    "Meeting"
    ]
    },
    "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgDarkPurple' , 'sp-css-backgroundColor-BgViolet sp-css-color-VioletFont')+' sp-field-fontSizeSmall'",
    {
    "operator": ":",
    "operands": [
    {
    "operator": "==",
    "operands": [
    "[$Event_Type]",
    "Event"
    ]
    },
    "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgBlue' , 'sp-css-backgroundColor-BgCornflowerBlue sp-css-color-CornflowerBlueFont')+' sp-field-fontSizeSmall'",
    {
    "operator": ":",
    "operands": [
    {
    "operator": "==",
    "operands": [
    "[$Event_Type]",
    "Board"
    ]
    },
    "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgGray' , 'sp-css-backgroundColor-BgLightGray sp-css-color-LightGrayFont')+' sp-field-fontSizeSmall'",
    {
    "operator": ":",
    "operands": [
    {
    "operator": "==",
    "operands": [
    "[$Event_Type]",
    "Wellness"
    ]
    },
    "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgDarkGreen' , 'sp-css-backgroundColor-BgSage sp-css-color-SageFont')+' sp-field-fontSizeSmall'",
    ""
    ]
    }
    ]
    }
    ]
    }
    ]
    }
    ]
    }
    ]
    }
    ]
    }
    ]
    }
    }


Resources