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'",
""
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
}
