SharePoint online event calendar view color formating not working - Please help

Copper Contributor

Hi all,

 

I am facing a strange issue and i tried so many troubleshooting but unable to figure out what is going wrong. I have done the following steps for the event calendar view ( Type Event list)EventList.PNG

1) Made sure event type column is selected in the view im using

2)Formatted the view with color codes below json for your reference ( internal name chosen is correct)

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
"additionalEventClass": {
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$EventType0]",
"People Manager"
]
},
"=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgDarkRed' , 'sp-css-backgroundColor-BgCoral sp-css-color-CoralFont')+' sp-field-fontSizeSmall'",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$EventType0]",
"Diversity and Inclusion"
]
},
"=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": [
"[$EventType0]",
"Wellness"
]
},
"=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": [
"[$EventType0]",
"Performance Framework"
]
},
"=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgDarkGreen' , 'sp-css-backgroundColor-BgSage sp-css-color-SageFont')+' sp-field-fontSizeSmall'",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$EventType0]",
"High Potentials Program"
]
},
"=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": [
"[$EventType0]",
"Training and Development (inhouse)"
]
},
"=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgDarkBlue' , 'sp-css-backgroundColor-BgLightBlue sp-css-color-LightBlueFont')+' sp-field-fontSizeSmall'",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$EventType0]",
"Recruitment"
]
},
"=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": [
"[$EventType0]",
"Surveys (Engagement/Pulse/Other)"
]
},
"=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgLavender' , 'sp-css-backgroundColor-BgLightPurple sp-css-color-LightPurpleFont')+' sp-field-fontSizeSmall'",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$EventType0]",
"Staff Gatherings"
]
},
"=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgDarkPink' , 'sp-css-backgroundColor-BgLilac sp-css-color-LilacFont')+' sp-field-fontSizeSmall'",
""
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
}

 

 

 

Appreciate your insights on this 

5 Replies

@radsan1005 Hey, at first glance, it looks like you're using the wrong schema. You'll need to use Calendar Formatter JSON in order to use additionalEventClass

 

 "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/calendar-formatting.schema.json",

 

Here's a link for you: Format calendar view to customize SharePoint | Microsoft Learn

@HelloBenTeoh 

 

Thanks for the reply! I tried this and it didn't make any change in formatting

@radsan1005 Can you share some more information about what you're trying to do?

 

 

Hi Im trying to do color formatting to type "Events List" . The column which im trying to use in the condition is available in the dropdown when we add if condition and then choosen a colour.Similarly did for all other conditions and saved.Then clicked on the advanced mode and got the json.
This didnt apply the color code to any events in the calendar ,its showing the default colors.

Note : I have tried to add a list and got the calendar view of the same contents and applied color formating its working fine as expected.

Is it a problem with "Events List " and works well with "List"

@radsan1005 Ah, yes you're right - my first reply was wrong. Are you using the Events web part (or the classic Calendar app) to create your events?

 

I've tried playing around with this as well and coming across the same issue. Here's what I've tried:

 

  • Updated the Event list to display in the 'New experience'
  • Created a new Calendar view, included the 'category' column
  • Tried to Format the new view with Conditional formatting in 'design mode' (Applied formatting to 'Month')

Changes didn't apply. 

 

Your solution to create a new list seems like the best option.